css 只改变父元素的透明度,不改变子元素透明度rgba+opacity
给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50);
我们通常也会遇到,在给父元素背景设置透明度时,子元素内容继承了父元素的透明度。
如何让子元素脱离父元素的透明度?有如下几种方法:
1.父元素div,直接使用透明度的图片做背景。
2.父元素div(设置为相对定位),兄弟div1(设置为绝对定位)背景正常加透明度即可,兄弟div2(设置为绝对定位),层级关系高于div1即可。
3.利用CSS3属性rgba(即red+green+blue+alpha的颜色),例如 outline: 0px; padding: 0px; margin: 0px 0px 16px; font-size: 16px; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-break: break-all; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun;">但是IE7/8不支持此属性,可按如下方法写:
父元素div要写如下:background-color: #000;filter:Alpha(opacity=50);
子元素div加个定位position:absolute/relative即可。
css 只改变父元素的透明度,不改变子元素透明度rgba+opacity的更多相关文章
- CSS只改变背景透明度,不改变子元素透明度
一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- 将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值,就可移动四个按钮
将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值, 就可移动四个按钮 https://www.evernote.com/shard/s227/sh/78 ...
- css如何让父元素下的所有子元素高度相同
小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...
- CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
随机推荐
- HDUJ 1392 Surround the Trees 凸包
Surround the Trees Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- SQL中关于where后面不能放聚合函数(如sum等)的解决办法
我们在编写较为复杂的SQL语句的时候,常常会遇到需要将sum()放到where后面作为条件查询,事实证明这样是无法执行的,执行会报[此处不允许使用分组函数]异常. 那么如何解决呢,使用HAVING关键 ...
- php 方法笔记 比file_get_contents好
/*比file_get_contents稳定的多!$timeout为超时时间,单位是秒,默认为1s.*/ private function curl_get_contents($url,$timeou ...
- OpenShift负载分区策略(Router Shading)
在很多场景下,单靠几个在Infra节点上的Router进行服务请求的转发是不够的,项目中很多时候都有流量隔离的需求,主要场景在于: 一个集群中的不同的环境的流量隔离需求,比如开发走几个Router,生 ...
- Hadoop Combiners
In the last post and in the preceding one we saw how to write a MapReduce program for finding the to ...
- LaTex 制作表格 合并行\multirow 合并列\multicolumn
在latex文件最前面用这个包\usepackage{multirow} multirow 宏包提供了 \multirow 命令可以在表格中排版横跨两行以上的文本.命令的格式如下: \multirow ...
- Spark1.0.0 应用程序部署工具spark-submit
原文链接:http://blog.csdn.net/book_mmicky/article/details/25714545 随着Spark的应用越来越广泛,对支持多资源管理器应用程序部署工具的需求也 ...
- MonoSingleton——Unity中的单例模式
Unity中有很多特别的类需要以单例模式呈现,比如全局的UI管理类,各种缓存池,以及新手导航类等等.而Unity中,因为所有继承自Monobehaviour的脚本在实现的时候都是单线程的,所以像网上流 ...
- [Algorithm] Construct a Binary Tree and Binary Search
function createNode(value) { return { value, left: null, right: null }; } function BinaryTree(val) { ...
- [Grunt] Minifying your output with grunt-uglify
For production we want to use minified javascript to reduce the payload that is sent from the server ...