css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
类别:Web前端 浏览量:1667
时间:2022-01-15 01:47:23 css3渐变背景图片
css3实现背景图片半透明内容不透明的方法示例上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。
效果展示:
内容半透明
内容不透明
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果,达不到上述的效果
方法一:设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
如果是背景是图片的上面的方法将就不适用,以下提供两个方法:
第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现
.login_box::before{ content:""; background-image:url(images/one.jpg" alt="css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)" border="0" />
方法与伪元素异曲同工,我们可以通过设置不通的li,里面的li放置内容,父级li设置背景,然后给它设置透明度,大概布局如下:
<li class="bg"> <li class="content"> 内容 </li> </li>
这样也可以达到同样的效果
到此这篇关于css3实现背景图片半透明内容不透明的方法示例的文章就介绍到这了,更多相关css3背景图片半透明内容不透明内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css 中border基本语法(详解CSS的border边框属性及其在CSS3中的新特性)
- CSS3动画属性animation
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css3设置元素的边框图像(详解CSS3 用border写 空心三角箭头 两种写法)
- css3 图片边框(css3图片边框border-image的用法)
- css3弹性布局(CSS3弹性布局内容对齐justify-content属性使用详解)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- css3渐变放大功能(CSS3 渐变Gradients之CSS3 线性渐变)
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- css3颜色详解(CSS3混合模式mix-blend-mode/background-blend-mode简介)
- css3 box-shadow
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- css3带阴影弹出窗口(CSS3解决移动页面上点击链接触发色块的问题)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)