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


Posted in HTML / CSS onApril 13, 2021

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

效果展示:

内容半透明

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设置背景,然后给它设置透明度,大概布局如下:

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

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

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

 
HTML / CSS 相关文章推荐
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
You might like
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
高二政治教学反思
2014/02/01 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书