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

通过css使用background-color为背景图添加遮罩效果的两种方法CSS实现同一行的图片和文字垂直居中对齐的方法CSS解决文字与图片不能水平居中对齐的问题垂直居中对齐的CSS示例代码css中使input输入框与img(图片)在同一行居中对齐SCSS移动端页面遮罩层效果的实现及常见问题解决css遮罩全屏居中对齐的实现方式

2021-09-04 833人已围观

简介这篇文章主要介绍了通过css使用background-color为背景图添加遮罩效果的两种方法,需要的朋友可以参考下

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：

第一种，代码如下：

css:

 .wrap{ position: relative; background: url(i/pic4.jpg) no-repeat; -webkit-background-size: 100%; background-size: 100%; } .warp-mask{ height:100%; width:100%; background: rgba(0,0,0,.4); }

html:

第二种，通过after伪元素设置，代码如下：

css:

 .wrap{ position: relative; background: url(i/pic4.jpg) no-repeat; -webkit-background-size: 100%; background-size: 100%; } .wrap-mask:after{ position: absolute; top: 0; left: 0; content: ""; background-color: yellow; opacity: 0.2; z-index: 1; width: 100%; height: 100%; }

html:

总结

以上所述是小编给大家介绍的通过css使用background-color为背景图添加遮罩效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：CSS3实现文本垂直排列的方法深入理解CSS行高line-height与文本垂直居中的原理CSS文本和div垂直居中方法总结通过CSS显示垂直文本以垂直方式显示文本元素通过css控制HTML文本框中的文字垂直居中CSS设置多行文本垂直居中的方法用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的

下一篇：css遮罩全屏居中对齐的实现方式css3实现一个div设置多张背景图片及background-image属性实例演示CSS3实现的全屏背景图片缩小渐变切换效果源码CSS的background属性及CSS3的背景图片设置总结jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码jquery+css3实现的网页背景图片固定内容切换特效源码CSS实现镂空遮罩效果CSS3 mask 遮罩的具体使用方法css3给背景图片加颜色遮罩的方法

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

相关内容

点击排行

本栏推荐

猜你喜欢