背景半透明，子元素不透明的效果经常需要用到。通常对父容器使用opacity属性时，子元素也跟着变透明，所以不妨设置父容器的

background-color:rgba(r,g,b,x);

其中x取值从0到1，表示透明程度。

父容器利用opacity设置透明后，子元素跟着变透明的解决方案的更多相关文章

  1. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  2. winform子容器随父容器的变化设置

    在设计winform窗体时,因为会很少去调整窗体的大小,这时子控件就会出很尴尬的情况, 通过查看空间的属性,发现有这样两个属性,dock和anchor.这里主要说anchor,官方 解释没太看懂,我的 ...

  3. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  4. 利用 :first-child 和 :nth-last-child 确定子元素数目

    读<css揭秘>时,发现选择器的神奇作用,可以确定子元素数目,比如: li:first-child:nth-last-child(2),li:first-child:nth-last-ch ...

  5. BootStrap 实现导航栏nav透明，nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

  6. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  7. IOS 设置视图半透明子控件不透明

    代码处理: UIColor *color = [[UIColor blackColor] colorWithAlphaComponent:0.6]; self.view.backgroundColor ...

  8. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  9. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

随机推荐

  1. BVT & BAT （版本验证测试和版本验收测试）

    BVT & BAT 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.BVT: (Build Verification Test ) BVT的概念: BVT(版本验证测试)是在所有开发 ...

  2. c 二叉树的使用

    简单的通过一个寻找嫌疑人的小程序 来演示二叉树的使用 #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  3. 现代3D图形编程学习-环境设置

    本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

  4. Win10桌面预览版14316更新内容大全

    下载更新: 安装之后右下角: Win10桌面预览版14316更新内容:       Windows上运行乌班图Bash:通过设置开启开发者模式,更新和安全>面向开发人员.然后搜索"Wi ...

  5. 通过pycharm使用git[图文详解]

    前言 使用git+pycharm有一段时间了,算是稍有点心得,这边整理一下,可能有的方法不是最优,欢迎交流,可能还是习惯敲命令去使用git,不过其实pycharm已经帮忙做了很多了,我们可以不用记住那 ...

  6. [C#] 多线程总结(结合进度条)

    线程生命周期(来源 w3cschool) 未启动状态:当线程实例被创建但 Start 方法未被调用时的状况. 就绪状态:当线程准备好运行并等待 CPU 周期时的状况. 不可运行状态: 已经调用 Sle ...

  7. powerdesigner显示列描述信息

    将Comment中的字符COPY至Name中 -------------------------------------------------- Option   Explicit Validati ...

  8. mariadb 最新精简压缩版 win64 解压即用

    包含版本: mariadb-10.1.18-winx64 mariadb-5.5.53-winx64 32的没有压缩,估计用的人也比较少. 网盘链接: http://pan.baidu.com/s/1 ...

  9. JS实现文字截取（雾）

    今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...

  10. 联机分析处理（OLAP）到底是什么？

    联机分析处理 (OLAP) 的概念最早是由关系数据库之父E.F.Codd于1993年提出的,OLAP的提出引起了很大的反响,OLAP作为一类产品同联机事务处理 (OLTP) 明显区分开来. 当今的数据 ...