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和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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连接Oracle数据库
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
js循环改变div颜色具体方法
2013/06/25 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
详解python算法之冒泡排序
2019/03/05 Python
Django密码存储策略分析
2020/01/09 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
优乐美广告词
2014/03/14 职场文书
大学生党员承诺书
2014/05/20 职场文书
合同意向书范本
2014/07/30 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
python如何查找列表中元素的位置
2022/05/30 Python