当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 | .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来操纵堆叠顺序。）
最后我们将文字移到中间位置
1 2 3 4 5 6 7 8 9 10 11 | p{
width: 100%;
height: 1.5em;
color: #fff;
font-weight: bold;
text-align: center;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}
|
效果如下：
以上就是如何使用CSS实现背景图像透明的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css中margin重叠及防止的方法介绍（代码示例）
css如何设置不可点击
css怎么设置侧边栏
css实现落叶动画效果
css怎么设置最小宽度
css怎么设置角度
为什么要用css？
css中怎么把图片设置居右
“margin:0 atuo;”是什么意思？
css样式由什么组成
更多相关阅读请进入《图像透明》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何使用CSS实现背景图像透明
