您的位置:首页 > 新闻 > 资讯 > 东莞阳光网官网投诉中心_重庆 新闻发布会_新闻投稿_免费合作推广

东莞阳光网官网投诉中心_重庆 新闻发布会_新闻投稿_免费合作推广

2024/12/25 10:49:29 来源:https://blog.csdn.net/I_nur/article/details/144119501  浏览:    关键词:东莞阳光网官网投诉中心_重庆 新闻发布会_新闻投稿_免费合作推广
东莞阳光网官网投诉中心_重庆 新闻发布会_新闻投稿_免费合作推广

目录

1.前言

2.解决思路

3.具体实例

4.另外一种实例

5.总结


1.前言

div背景图为project-bg.png,设置div透明度为0.6;div内的名称、数值受透明度影响颜色显示不正常;怎么设置背景图的透明度为0.6不影响内部元素;

2.解决思路

在 CSS 中,如果你想设置 div 的背景图的透明度而不影响其内部内容的透明度,可以使用伪元素 ::before::after 来实现。这样背景图的透明度只会影响背景本身,而不会影响 div 内部的内容。

以下是一个示例,展示如何使用伪元素 ::before 来设置背景图的透明度为 0.6,同时保持 div 内部内容的颜色正常显示。

3.具体实例

<div class="container"><h1>项目名称</h1><p>数值: 12345</p>
</div>

css设置

.container {position: relative;width: 300px;height: 200px;/* 其他样式 */
}.container::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('project-bg.png');background-size: cover;background-position: center;opacity: 0.6;z-index: -1; /* 确保背景图在内容下方 */
}.container h1, .container p {/* 内容样式 */color: white; /* 根据需要调整颜色 */z-index: 1; /* 确保内容在背景图上方 */position: relative; /* 确保 z-index 生效 */
}

上述代码说明

HTML 结构:
一个包含标题和数值的 div 容器。
CSS 样式:
容器样式:
position: relative;:使容器成为相对定位,以便伪元素可以相对于它定位。
width 和 height:设置容器的尺寸。
伪元素 ::before:
content: '';:必需,用于生成伪元素。
position: absolute;:使伪元素绝对定位,相对于容器定位。
top: 0; 和 left: 0;:使伪元素覆盖整个容器。
width: 100%; 和 height: 100%;:使伪元素与容器大小一致。
background-image: url('project-bg.png');:设置背景图片。
background-size: cover;:使背景图片覆盖整个容器。
background-position: center;:使背景图片居中。
opacity: 0.6;:设置背景图的透明度为 0.6。
z-index: -1;:确保背景图在内容下方。
内容样式:
color: white;:设置内容的颜色(根据需要调整)。
z-index: 1;:确保内容在背景图上方。
position: relative;:使 z-index 生效。

4.另外一种实例

如果背景是颜色,不是一个图片,可以直接使用下面这种方法

background: rgba(41,76,123,0.3);

5.总结

运行示例
将上述 HTML 和 CSS 代码放入你的项目中,运行后你会看到背景图的透明度为 0.6,而 div 内部的内容颜色正常显示。

注意事项
确保背景图片路径正确。
根据实际需求调整 div 的尺寸和内容样式。
如果内容有多层嵌套,确保所有需要在背景图上方显示的元素都设置了 position: relative; 和 z-index。
通过这种方法,你可以轻松地设置背景图的透明度,而不会影响 div 内部内容的显示。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com