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实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
You might like
php日历[测试通过]
2008/03/27 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript放大镜效果的简单实现
2013/12/09 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python如何发送与接收大型数组
2020/08/07 Python
python之语音识别speech模块
2020/09/09 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
毕业自我鉴定
2013/11/05 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
施工质量承诺书范文
2014/05/30 职场文书
代理人委托书
2014/08/01 职场文书
2015年党员承诺书
2015/01/21 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
图书借阅制度范本
2015/08/06 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书