给元素加透明度时,通常写法为: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. 个人对AutoResetEvent和ManualResetEvent的理解

    一.作用 AutoResetEvent和ManualResetEvent可用于控制线程暂停或继续,拥有重要的三个方法:WaitOne.Set和Reset. 这三个方法的官方定义并不好理解,什么终止.非 ...

  2. 进程上下文VS中断上下文

    转载:http://www.cnblogs.com/zzx1045917067/archive/2012/12/19/2824552.html 内核空间和用户空间是现代操作系统的两种工作模式,内核模块 ...

  3. Model工具

    Sybase PowerDesigner - 一个高端数据建模工具.你可以下载一个45天试用版. ERWin - 一个高端数据建模工具.可下载试用版. Rational Rose Enterprise ...

  4. Linux操作系统的种种集成开发环境

    Linux操作系统的种种集成开发环境 随着Linux的逐渐兴起,已经有为数众多的程序在上面驰骋了,许多开发环境(Development Environment)也应运而生.好的开发环境一定是集成了编辑 ...

  5. 企业应用:浅谈 “数据权限” 和 查询 API 设计

    背景 多数企业应用都需要对数据权限进行控制,如:某个用户只能看到某个范围的数据(数据行).某个用户只能看到某几列数据(数据列).本文以数据行级别的权限控制为范例,谈谈如何设计权限模型和查询 API. ...

  6. Xcode的插件的路径

    /Users/dllo/Library/Application\ Support/Developer

  7. javacc学习总结

    在学javacc的时候.发现一个问题,见下: Example.jj文件 PARSER_BEGIN(Example) public class Example { public static void ...

  8. jeecms运行出现 Expected to read 4 bytes, read 0 bytes before connection was unexpectedly lost.解决

    在/WEB-INF/config/application-context.xml中添加红色字体内容: <bean id="dataSource" class="co ...

  9. thymleaf th:text 和 th:utext 之间的区别

    1 th:text属性 可对表达式或变量求值,并将结果显示在其被包含的 html 标签体内替换原有html文本 文本连接:用“+”符号,若是变量表达式也可以用“|”符号 e.g. 若home.welc ...

  10. sscanf %*s

    一次在源码里看到 %*s 的格式,从未见过百思不得其解,今天用google的code搜索,搜到一些使用范例,猜测%*s 是说这里有一些字符,长度不一定,按正则表达式的习惯,*代办任意非负整数.例如: ...