css实现背景图片透明内容不透明
Deca~
帮助5人
实现背景图片透明而内容不透明有很多种方法，但是我最常用的是用before伪元素。
大家肯定都知道透明是使用opacity，但opacity会让背景及其子元素的所有内容都透明，比如：
-
<style>
-
* {
-
margin: 0;
-
padding: 0;
-
}
-
-
.box1 {
-
width: 500px;
-
height: 340px;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
margin-left: -250px;
-
margin-top: -170px;
-
opacity: 0.5;
-
background-image: url("./StudyCode/HTML5 CSS3/图片/哈利波特7.png");
-
}
-
.box2{
-
width: 200px;
-
height: 150px;
-
font-size: 40px;
-
font-weight: 500;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
margin-left: -100px;
-
margin-top: -75px;
-
text-align: center;
-
line-height: 150px;
-
letter-spacing: 10px;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div class="box1">
-
<div class="box2">哈利波特</div>
-
</div>
-
</body>
-
-
</html>
得到的结果如下：可以看见其中的字体也被透明了
在上面的css中加上如下代码即可解决：记得把上面的.box1的最后两行代码删掉，不然会覆盖before的内容。
-
.box1::before{
-
width: 500px;
-
height: 340px;
-
content: "";
-
/* 一定要加定位，这样z-index才起作用 */
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
margin-left: -250px;
-
margin-top: -170px;
-
z-index: -1;
-
opacity: 0.5;
-
background-image: url("./StudyCode/HTML5 CSS3/图片/哈利波特7.png");
-
}
得到结果：
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhffhjgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
