文档章节

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

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

《css揭秘》学习笔记(一)

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

u014744118 ⋅ 2017/07/03 ⋅ 0

兼容几乎所有浏览器的透明背景效果

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

glowry ⋅ 2014/05/03 ⋅ 3

用最短的CSS样式,勾勒大数据演示屏

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

maodayeyeye ⋅ 06/11 ⋅ 0

::before和::after伪元素的用法

一、前言 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::...

HarleyZhuge ⋅ 01/17 ⋅ 0

【CSS选择符】伪类和伪元素

0016.jpg 首先是最为常用的链接的样式 根据访客与链接的交互方式,链接有四种状态,这四种状态的外观可以使用四个伪类装饰。这些伪类分别对应下述的四个状态: HTML代码 a:link(未访问状态)...

KelvinZ ⋅ 2017/12/30 ⋅ 0

css笔记

一、特殊选择器 1、* 用于匹配任何的标记 2、> 用于指定父子节点关系:子节点 3、E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F:挨着的 4、E ~ F 匹配所有E元素之后的同级元素F...

前端小虾 ⋅ 2016/10/10 ⋅ 0

CSS3实现背景透明,文字不透明

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

neromaycry ⋅ 06/23 ⋅ 0

兼容性背景颜色半透明CSS代码(不影响内部子元素)

兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(0, 0, 0, .25);filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); ......

山哥 ⋅ 2015/01/12 ⋅ 0

2012网页设计趋势(下)

CSS3 技术 不确定你可以利用CSS3吗?再想想。网络先锋如Andy Clarke 和 Jeremy Keith一直提倡网页设计要“逐步加强”。 逐步增强是指在网站设计师时要兼顾到旧版浏览器的可用性,而“增强”则...

未来十年 ⋅ 2011/12/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部