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.浏览器缺省 ...
随机推荐
- js继承——从创建对象开始
从创建对象开始 创建对象的简单方法就是:使用Object构造函数或者对象字面量.但这两个方法有个缺点:创建相同对象,要编写大量重复代码. 为了避免这个问题——>工厂模式:用函数封装以特定接口创建 ...
- NHibernate使用无状态Sessions
NHibernate 3.0 Cookbook第三章,Using stateless sessions的翻译. 当要处理大量的数据,你通常可能会使用更"底层"的API来改善性能,在 ...
- golang日期时间格式format()
format()函数格式化字符串,用了语句time.now().format(“2015-11-12 12:00:00”),结果输出结果就是不能达到理想的结果,然后把golang文档中的”2006-0 ...
- 仿LOL项目开发第三天
仿LOL项目开发第二天 by草帽 昨个我们已经实现了下载功能,但是发现没有,下载的包是压缩的,没有解压开,那么Unity是识别不了的. 所以今个我们来讲讲如何实现解压文件. 还记得吗,我们在Downl ...
- 今天才知道的JavaScript的真实历史~[转]
JavaScript真的继承自Cmm吗?JavaScript与Java有多少关系?JavaScirpt最初的设计是怎样的?这个文章是从一个叫编程人生的网站上看到的.不知道出处在哪.在许多资料,Java ...
- js和jquery判断事件流
$('body').on('click',function(e){ var $target = $(e.target); if($target.parents('.fixNav>div').le ...
- Win10系统开启Linux Bash命令行
Win10系统开启Linux Bash命令行 导读 在Build2016上微软为了拉拢开发者发了个大招,那就是Win10一周年更新集成原生Linux Bash命令行功能,这将允许开发者或用户在Wind ...
- Android安装包相关知识汇总 (编译过程图给力)
转自: https://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=208008519&idx=1&sn=278b7793699 ...
- mysql更新日志问题
[root@localhost ~]# /etc/init.d/mysqld restart 停止 mysqld: [确定] 正在启动 mysqld: [确定] 故障:今天在维护以前数据库日志的时候, ...
- C-IDE使用指南
HI 您好: 亲爱的学员,本文章是基于C-IDE的入口使用指南,您能够查看demo项目来了解C-IDE详细操作哦~ 如有疑问您可提交反馈来咨询,或扫描下方二维码增加官方微信群.我们会认真对待且具体回 ...