css网页背景图半透明,css背景图片不透明度

　　上一个博客登陆页是个问题，突然想用背景图片透明，内容不透明的效果。这里，我就说说我的两个想法。

效果展示：

　　内容是半透明的。

　　不透明内容

　　最常见的方法是设置元素的不透明度。这样设置的效果是内容和背景半透明，严重影响视觉效果，达不到上述效果。

　　方法一：设置背景色：rgba()，只能设置背景色的透明度。

　　如果背景是图片，上述方法将不适用。这里有两种方法：

　　第一种是使用伪元素：before，通过给伪元素添加背景，设置伪元素的背景透明度来实现。log in _ box:before { content: ；背景-图片：URL(images/one . jpg)；不透明度：0.5；//透明度设置z-index:-1；背景-尺寸：500px 300px宽度：500px高度：300px位置：绝对；//一定要设置position:absolute，这样可以设置z-index，这样背景就是下一级内容top:0px；左：0px边框半径：40px} .login_box{位置：固定；左：50%；top:200 px；宽度：500px高度：300px左边距：-250像素；边框半径：40px盒影：10px 10px 5px # 888边框：1px纯色# 666；文本对齐：居中；}方法类似伪元素。我们可以设置不可传递的div，将内容放在div内部，设置父div的背景，然后为其设置透明度。大致布局如下：

　　class= BG div class= content content/div/div这样也可以达到同样的效果。

　　关于css3如何实现背景图像的半透明内容不透明度的示例，本文到此结束。有关css3背景图片半透明内容不透明度的更多信息，请搜索之前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。