文档章节

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

大止刀口
 大止刀口
发布于 2016/06/14 23:51
字数 157
阅读 249
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 眼看着这个陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
13分钟前
4
1
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
45分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部