您现在的位置是：网站首页> 编程资料编程资料

使用CSS cross-fade()实现背景图像半透明效果的示例代码

2021-09-03 840人已围观

简介这篇文章主要介绍了使用CSS cross-fade()实现背景图像半透明效果的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、需求描述

某元素，希望 background-image 背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。

如果是纯色背景或者是CSS渐变背景，很好处理，使用 rgba 或者 hsla 颜色色值即可。

但是，如果是 url() 背景图像，似乎就无能为力了。

如果是个内联的图像那很好处理，无论是filter滤镜、 mask遮罩还是 opacity 透明度设置都可以实现我们的效果，但是偏偏这里是背景图像，所有前面提到的这些方法都会影响文字的正常显示。

我估计很多人会想到使用 ::before / ::after 伪元素实现，例如：

 .box { position: relative; z-index: 0; } .box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(xxx.jpg) no-repeat center / contain; z-index: -1; opacity: .5; }

实时效果如下（如果没有效果请访问原文作者张鑫旭）：

by-zhangxinxu

但是这个方法太

上一篇：解决CSS样式冲突的几个办法(小结)css样式冲突问题练习示例

下一篇：奇妙的 CSS 属性 MASK详解css中filter属性和backdrop-filter的应用与区别详解详解HTML5中CSS外观属性CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)CSS字体、文本、列表属性详细介绍CSS 继承 inherit属性的方法利用CSS中的 outline-offset 属性实现加号css一些不常见但很有用的属性操作大全

您现在的位置是：网站首页> 编程资料编程资料

使用CSS cross-fade()实现背景图像半透明效果的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢