文档章节

CSS笔记(一):before伪元素实现半透明背景图

大止刀口
 大止刀口
发布于 2016/06/14 23:51
字数 157
阅读 227
收藏 0

通过给元素before伪元素作为背景图片的载体,实现半透明背景。

这样的好处是避免直接调整opacity导致前景及子元素也变透明。

样式如下:

.pane {
    position: relative;
}
.pane::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(255, 0, 0, 0.5);
    opacity: 0.3;
}

下面是一个使用的例子。

示例如下:

<div class="pane">
    <div style="width:200px;height:200px;background:rgba(123,123,123,);">
    </div>
</div>

 

外面的div就是带半透明背景的元素。

里面的只是一个用来看效果的子元素。

© 著作权归作者所有

共有 人打赏支持
大止刀口
粉丝 6
博文 17
码字总数 10107
作品 0
汕头
程序员
【CSS进阶】伪元素的妙用--单标签之美

最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图...

chokcoco
2016/05/25
0
0
《css揭秘》学习笔记(一)

第0章 关于本书 1、检测属性 snippetid="2469057" snippetfilename="blog201707031_4539286" name="code" class="javascript">function testproperty(property){var root = document.documen......

u014744118
2017/07/03
0
0
兼容几乎所有浏览器的透明背景效果

当今的大部分网页设计都包含了半透明的元素.但用CSS实现想要的效果却没那么简单. 现存的问题 如果我们想要一个半透明背景,有两种实现方式: – 利用CSS和opacity属性 – 建立一个24位PNG背景图...

glowry
2014/05/03
0
3
用最短的CSS样式,勾勒大数据演示屏

先看案例效果,再看心得与总结 前段时间撸了一个演示平台,输入任一手机号,可追踪其行迹,类似《人民的名义》追踪丁义珍的效果,很明显涉密了,因此特意克隆了一个,并把后端阉割了,目前查...

maodayeyeye
06/11
0
0
CSS3实现背景透明,文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度。 效果如下: 这样貌似也满足了需求,不过并不...

neromaycry
06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flask 开发填坑

插件的选择: flask-security 真的是个鸡肋啊。自带的页面,好丑。还不如用flask-login来做呢。

pearma
15分钟前
0
0
讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
51分钟前
0
0
day95-20180922-英语流利阅读-待学习

Hey Jude 半个世纪传唱不衰的背后故事 毛西 2018-09-22 1.今日导读 2004 年,The Beatles 被《滚石》杂志选为“历史上最伟大的 50 位流行音乐家的第一位”。这四名来自英国利物浦的男孩不仅对...

飞鱼说编程
58分钟前
1
0
OSChina 周六乱弹 —— 放假前期焦虑症晚期

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Matteo的单曲《Panama》: 《Panama》- Matteo 手机党少年们想听歌,请使劲儿戳(这里) @新垣吉衣OSC :我发现只要去有小朋友...

小小编辑
今天
193
10
wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部