CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。
可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用 RGBA。
例如:
设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。
即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。
解决方法:为父元素设置background: rgba(0,0,0,0.5)。
CSS中如何设置父元素透明度不影响子元素透明度的更多相关文章
- 父div的透明度不影响子div透明度
在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度: ...
- CSS 设置背景透明度,不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!
LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
- 改变父元素的透明度,不影响子元素的透明度—css
1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...
- CSS中怎么设置元素水平垂直居中?
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
随机推荐
- mysql DELETE语句 语法
mysql DELETE语句 语法 作用:用于删除表中的行.广东大理石构件 语法:DELETE FROM 表名称 WHERE 列名称 = 值 mysql DELETE语句 示例 //删除person表 ...
- 【bzoj2502】清理雪道
题目描述: 滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的方向代表斜坡下降的方向. 你的团队负责每周定时清理雪道.你们拥有一架直升 ...
- H-ui.admin v3.1学习之路(一):导航栏信息无法在内容区显示
注:我使用的是别人的模板文件在我的云盘“素材模板—H-ui.admin’中. 直接上代码: <li class="dropDown dropDown_hover"> & ...
- httpscan 爬虫式的网段Web主机发现小工具
httpscan是一个扫描指定网段的Web主机的小工具.和端口扫描器不一样,httpscan是以爬虫的方式进行Web主机发现,因此相对来说不容易被防火墙拦截.httpscan会返回IP http状态码 ...
- Java网络编程与NIO详解10:深度解读Tomcat中的NIO模型
本文转自:http://www.sohu.com/a/203838233_827544 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 ht ...
- ORACLE查询隐含参数
查询隐含参数:col name for a30col VALUE for a10col DESCRIB for a40set lines 200SELECT x.ksppinm NAME, y.ksp ...
- (转)VS2010结合水晶报表做条码标签打印功能
本文转载自:http://blog.sina.com.cn/s/blog_552ca1400100y6dd.html 先来个功能效果图: 大家都知道VS2005和VS2008软件本身是包含水晶报表插件 ...
- 部署-GPS授时系统:GPS授时系统
ylbtech-部署-GPS授时系统:GPS授时系统 GPS授时系统是针对自动化系统中的计算机.控制装置等进行校时的高科技产品,GPS授时产品它从GPS卫星上获取标准的时间信号,将这些信息通过各种接口 ...
- Vue引入Jquery和Bootstrap
一.引入jquery包 npm i jquery 二.配置jquery 在webpack.base.conf.js中加载juery插件 所以要配置该文件 三.引入Bootstrap npm i bo ...
- flex 数字上标
以A的3次方为例,我们输入以下代码: /** * 部分代码参考Adobe文档: * http://help.adobe.com/zh_CN/AS3LCR/Flash_10.0/flash/text/e ...