CSS中实现背景图像透明的属性是opacity属性,但是,如果你使用它来创建带有文本的内容的话,你就会发现文本内容也会随着透明。
现在,我们先来编写一个只是背景图像透明的CSS。
首先,我们来看一下HTML代码
<div class="content"> <div class="bg"></div> <p>蒲公英</p> </div>
.bg是一个空div,“蒲公英”写在它之外。
也就是说,下面将利用position属性将“蒲公英”放在图像的上面,我们来看具体的代码实例
首先,给出相对位置(position:relative;)到.content。
为了更容易理解背景透明,我们先给一个黑色的背景
.content{ width: 450px; height: 300px; background: #000; position: relative; /*相对位置*/ } p{ color: #fff; font-weight: bold; text-align: center; }
效果如下:
接下来,我们来设置.bg
将width和height设置为100%并将position设置为绝对位置放在左上(left:0; top: 0;)。
.bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(img/pugongying.jpg); background-size: cover; opacity: 0.5; }
效果如下:
实际上,字符位于透明图像下方。
所以,比起固定在绝对位置的背景图像,p的内容必须要在前面。
因此,p也可以通过给予position:absolute;给它堆叠顺序。(因为它被描述为position:absolute;,还可以使用z-index来操纵堆叠顺序。)
最后我们将文字移到中间位置
p{ width: 100%; height: 1.5em; color: #fff; font-weight: bold; text-align: center; position: absolute; margin: auto; top: 0; bottom: 0; }
效果如下:
以上就是如何使用CSS实现背景图像透明的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论