css3实现背景图片半透明内容不透明的方法示例

上一个博客做登陆的页面是遇到的问题，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。

效果展示：

内容 半 透明

&nbs p;

内容不透明

最常见的做法事设置元素的opac IT y,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果，达不到上述的效果

方法一： 设置background-color:rgba(),这种方式只能设置 背景颜色 的透明度。

如果是背景是图片的上面的方法将就不适用，以下提供两个方法：

第一个就是 利用 伪元素 :: before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的 背景透明 度来实现

.lo gin _box::before{
            content:"";
           
            background -i mage:url(images/one. jpg );
            opacity:0.5;//透明度设置
            z-index:-1;
             background-size :500px 300px;
            width:500px; 
            h ei ght:300px;
            position:absolute;
            //一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层
            top:0px;
            left:0px;
            border-radius:40px;
        }
         . LOG in_box{
            position:fixed;
            left:50%;
            top:200px;
            width:500px;
            height:300px;
            m arg in-left:-250px;
            border-radius:40px;
            box -s hadow: 10px 10px 5px  # 888;
            border:1px solid #666;
 
            text-align: center ;
        }

方法与伪元素异曲同工，我们可以通过设置不通的div，里面的div放置内容，父级div设置背景，然后给它设置透明度，大概布局如下：

<div class="bg">
    <div class="content">
    内容
    </div>
</div>

这样也可以达到同样的效果

到此这篇关于css3实现背景图片半透明内容不透明的方法示例的 文章 就介绍到这了,更多相关css3背景图片半透明内容不透明内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 css3实现背景图片半透明内容不透明的方法示例 全部内容，希望文章能够帮你解决 css3实现背景图片半透明内容不透明的方法示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css3实现背景图片半透明内容不透明的方法示例的详细内容...