图片上的文字用CSS写出毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

儒爵.CN

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量372

点赞数

本文链接：https://blog.csdn.net/weixin_45578749/article/details/100131719

版权

图片上的文字用CSS写出毛玻璃效果

2016-10-04 08:11 网页设计标签：css 1297 发表评论

半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的北层之上，可以减少对比度，确保文本的可读性。这种效果的确有视觉冲击力，但仍然可能导致文字很难阅读，特别是当透明度较低或者背景图案太花哨时。

结构大概这个样子的：

<div>
    <p>....</p>
</div>

CSS代码可能是这样的：

body{
    background:url(...) 0/cover fixed;
}
div{
    background:hsla(0,0%,100%,.3);
}

半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的北层之上，可以减少对比度，确保文本的可读性。这种效果的确有视觉冲击力，但仍然可能导致文字很难阅读，特别是当透明度较低或者背景团太花哨时。

相信你已经发现，这个效果的文字难以看清，因为它后面的背景图片太多花哨，而它的背景色只有30%的不透明度。当然，我们可以提高不透明度来增加文本的可读性，但这样一来整个效果就没有那么生动了。

在传统平面设计中，这个问题解决方法通常是把文本层所覆盖的那部分图片区域作模糊处理。但由于模糊运算消耗资源极其巨大，导致这个技巧在网页设计和UI设计中鲜有用武之地。借助blur()滤镜，我们在CSS中获得了对元素进行模糊处理的能力。不过如果我们直接运用，整个元素都会被模糊，文本就更难阅读了。有没有什么方法可以只对元素的背景层应用这个滤镜呢？

假设大背景的background-attachment的值是fixed，这种情况是有可能的，只不过不常见。由于我们不能直接对元素本事进行模糊，那么我们就对一个伪元素进行处理，然后再将其无缝匹配到<div>的背景上。

p{
    position:relative;
}
p::before{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background:rgba(255,0,0,.5);
}

我们可以看到，伪元素已经覆盖在内容元素上了，现在我们可以用z-index:-1来移动下背景的位置，并且把这个颜色换掉，换成背景图片。

p{
    position:relative;
    background:hsla(0,0%,100%,.3);
}
p::before{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    filter: blur(20px);
    z-index: -1;
}
div,p::before{
    background:url(...) 0 fixed;
}

我们发现，模糊效果在中心区域看起来已经非常完美了，但在接近边缘处会逐步消退。这是因为模糊会削减实色像素所覆盖的范围，削减的幅度正是模糊的半径长度。我们可以把宿主元素的尺寸再向外扩大20px。但由于各种浏览器算法存在差异，所以我们用一个更大的值会更保险些。

p{
    position:relative;
    background:hsla(0,0%,100%,.3);
    overflow:hidden;
}
p::before{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    filter: blur(20px);
    z-index: -1;
    margin:-50px;
}

现在页面文字的可读性比以前好多了，整个设计也优雅多了。唯一有争议的问题就是能否平稳回退。如果浏览器不支持滤镜的话，我们将会回到最上面那个效果。所以建议适当减少透明度，以便回退的时候会更好点。