css3实现背景图片半透明内容不透明的方法示例css3实现背景图片颜色修改的多种方式css3制作的背景渐变动画效果CSS3实现模糊背景的三种效果示例CSS3 菱形拼图实现只旋转div 背景图片不旋转功能CSS3只让背景图片旋转180度的实现示例基于css3制作的圆形透明画中画视频播放特效JS+CSS3文章内容背景黑白切换特效代码css3实现简单的白云飘动背景特效CSS3 实现的动态星空背景

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

效果展示：

内容半透明

内容不透明

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

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

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

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

 .login_box::before{ content:""; background-image:url(images/one.jpg); opacity:0.5;//透明度设置 z-index:-1; background-size:500px 300px; width:500px; height:300px; position:absolute; //一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层 top:0px; left:0px; border-radius:40px; } .login_box{ position:fixed; left:50%; top:200px; width:500px; height:300px; margin-left:-250px; border-radius:40px; box-shadow: 10px 10px 5px #888; border:1px solid #666; text-align:center; } 

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

 内容 

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

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！