给元素加透明度时,通常写法为: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的更多相关文章

  1. CSS只改变背景透明度,不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

  2. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

  3. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  4. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  5. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  6. 将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值,就可移动四个按钮

      将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值, 就可移动四个按钮               https://www.evernote.com/shard/s227/sh/78 ...

  7. css如何让父元素下的所有子元素高度相同

    小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...

  8. CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法

    我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...

  9. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

随机推荐

  1. Fiddler2 中文手册

    原文:http://blog.sina.com.cn/s/blog_66a13b8f0100vgfi.html 最近一阵研究 Fiddler2 的使用来着,一开始看起来有点找不着北,索性就根据官网资料 ...

  2. Python for 循环语句

    Python for 循环语句 Python for循环可以遍历任何序列的项目,如一个列表或者一个字符串. 语法: for循环的语法格式如下: for iterating_var in sequenc ...

  3. PTC点击网赚入门

    第一次接触PTC大概是11月19号左右,那时候第一感觉是"这不就是传销吗,肯定是骗人的",但是由于利润十分之大,又忍不住仔细研究了一下,我还是十分还是十分谨慎的,再加上程序员的头脑 ...

  4. HDU 3949 XOR 高斯消元

    题目大意:给定一个数组,求这些数组通过异或能得到的数中的第k小是多少 首先高斯消元求出线性基,然后将k依照二进制拆分就可以 注意当高斯消元结束后若末尾有0则第1小是0 特判一下然后k-- 然后HDU输 ...

  5. java 中函数的参数传递详细介绍

    java中函数的参数传递 总结: 1.将对象(对象的引用)作为参数传递时传递的是引用(相当于指针).也就是说函数内对参数所做的修改会影响原来的对象.  2.当将基本类型或基本类型的包装集作为参数传递时 ...

  6. GPGPU OpenCL Reduction操作与group同步

    Reduction操作:规约操作就是由多个数生成一个数,如求最大值.最小值.向量点积.求和等操作,都属于这一类操作. 有大量数据的情况下,使用GPU进行任务并行与数据并行,可以收到可好的效果. gro ...

  7. go语言基础之运算符

    一.运算符分类 1.1 算术运算符 运算符 术语 示例 结果 + 加 10 + 5 15 - 减 10 - 5 5 * 乘 10 * 5 50 / 除 10 / 5 2 % 取模(取余) 10 % 3 ...

  8. SQL 增删字段

    摘自: http://www.cnblogs.com/yiwd/archive/2012/12/25/2831822.html 下面为您介绍使用SQL语句如何增加.删除.修改字段,并判断字段是否存在的 ...

  9. window yii2 安装插件 报yiisoft/yii2 2.0.x-dev requires ext-mbstring错

    Problem 1 - yiisoft/yii2 2.0.x-dev requires ext-mbstring * -> the requested PHP extens ion mbstri ...

  10. RHEL7.0 配置网络IP的三种方法

    导读 RHEL7里面的网卡命名方式从eth0,1,2的方式变成了enoXXXXX的格式. en代表的是enthernet (以太网),o 代表的是onboard (内置),那一串数字是主板的某种索引编 ...