参考网页:
https://www.cnblogs.com/oxspirt/p/6251238.html CSS实现遮罩层透明文字不透明
https://blog.csdn.net/csu_passer/article/details/78406702 CSS3实现模糊背景的三种效果
https://www.cnblogs.com/zhaofeis/p/5938554.html CSS inherit
关于个人学习心得:
查阅了挺多关于前端的资料,以前一直纠结该如何学习HTML和CSS,看W3S的教程感觉收益没多大,第一映像就是有特别特别多要记的标签,而且W3S上的实例也杯水车薪,有许多细节的地方没有讲得很透彻。我看了HTML和CSS的教程后就决定直接从实战抓起,直接通过特效来学习,这样不仅学了特效,还能从中学到许多基本而且我还缺失的东西。
实际效果:
废话不多说,先看效果图,环境是chrome:
实现思路很简单,分为三个div,第一个div设置背景图,第二个div设置文字背景框,第三个div文字层。
三者的关系是:背景图->文字背景框 && 文字层
这里我们要引入伪元素after来实现背景模糊,这里需要after继承父类背景,然后在这个条件下进行模糊的话就可以达到没有白边的效果。
分析代码:
html没什么好说的,只要按要求嵌套进去即可。
<!-- html code -->
<div class="bg">
<div class="shape"></div>
<div class="content">The background picture is bluring.
<br>However, you can see that the text is not blur.<br>
背景图片已被高斯模糊,然而你可以看到文字并没有被模糊。
</div>
</div>
现在让我们一层一层剥开代码的心,一探究竟吧。首先是最外层bg背景层:
<!-- css code -->
<style type="text/css">
.bg{
background: url(img.png) no-repeat center center;
background-size: cover;
height: 700px;
text-align: center;
position: relative;
z-index: 5;
}
.bg:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(15px);
z-index: 3;
}
</style>
bg背景:导入背景并设置为不重复且居中对齐,cover保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。在这里设置文本对齐方式为center,当然你也可以放到文本层没有影响。position设置为相对定位,此处相对定位是相对前一个容器即body进行定位的(有错请纠正这里挺模棱两可的),通过z-index设置层叠为5,这里的z-index最大就说明它在最上面。
伪元素after:content属性一定要设置为空,否则会被判定为空对象,设置绝对定位,即相对于bg位置定位,设置背景继承bg,在对其进行模糊,设置层叠为3。这里也可以设置大于bg的z-index,没有影响。
<style type="text/css">
.content{
color: whitesmoke;
font-size: 20px;
font-family: Lucida Grande, "微软雅黑",Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana," sans-serif";
position: absolute;
top: 308px;
left: 528px;
z-index: 4;
}
</style>
文字层设置文字相关参数,位置,设置好层叠一定要保证在最上面,不要让图片挡住文本。
<style type="text/css">
.shape{
width: 583px;
height: 148px;
background: #7C7C7C;
position: absolute;
top: 276px;
left: 506px;
z-index: 4;
border-radius: 15px;
opacity: 0.5;
}
</style>
文本框层的层叠和文字层相等,也可以小于文字层。设置透明度,位置,颜色……等参数。
这时候效果差不多就出来了。浏览器如果分辨率变了会导致排版变乱,这时候只要在div层的最外面嵌套一个div,设置magrin为auto,固定宽高,就可以了。
.main{
width: 1510px;
height: 700px;
margin: auto;
}
总结:
根据电脑环境不同可能位置会有所偏差,请自行更改位置参数。这里面也有我不太理解的地方比如position参数,伪元素那为什么能够消去白边。如果有错误请各位网友即时纠正,谢谢啦。