因为之前的博客登录的页面有问题，突然想使用这种背景图片透明、内容不透明的效果，在这里谈谈我的两个想法。
效果演示：
内容半透明性
内容不透明
是最常见的法事设定要素opacity，该设定的效果内容和背景都是半透明的，严重影响了视觉效果，无法达到上述效果
设定方法1(background-color:rgba )。 用这个方法只能设定背景色的透明度。
如果背景在图像上的方法不成功，提供以下两种方法。
第一，通过利用虚拟元素：before向虚拟元素添加背景并设置虚拟元素的背景透明度来实现
. login_box:before{
内容： '；
background-image 3360 URL (images/one.jpg )；
opacity:0.5； //透明度设定
z-index:-1；
background-size:500px 300px；
width:500px；
height:300px；
定位：助手；
//务必设置位置： absolute并设置z-index，以便背景成为内容的下一个层次
top:0px；
left:0px；
border-radius:40px；
}
. login_box{
定位：固定；
left:50%；
top:200px；
width:500px；
height:300px；
边距左边缘：-250 px；
border-radius:40px；
box-shadow: 10px 10px 5px #888；
border:1px solid #666；
文本照明3360中心；
}
方法如果与虚拟元素不同，我们可以设置不通的div，将内容放在里面的div上，在父级div上设置背景，并对其设置透明度。 大致布局如下。
内容
这样也能得到同样的效果
关于这个css3背景图像的半透明内容的不透明化方法的例子的报道介绍到这里了。 有关css3背景图像半透明内容的不透明度的信息，请搜索script house以前的文章或继续参阅以下相关文章。 希望今后能多支持脚本屋。