背景半透明，子元素不透明的效果经常需要用到。通常对父容器使用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. 生成任意长度的随机数 JS

    1.Math.random().toString(36).substr(2); 结果:ywv6cnpkliahj4tep0 2.   1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  2. ElasticSearch 5学习(3)——单台服务器部署多个节点

    一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要实现ElasticSearch的分布式效果,所以需要启动多个节点,但是学习开发环境(不想开多个虚 ...

  3. linux2.6 内存管理——逻辑地址转换为线性地址（逻辑地址、线性地址、物理地址、虚拟地址）

    Linux系统中的物理存储空间和虚拟存储空间的地址范围分别都是从0x00000000到0xFFFFFFFF,共4GB,但物理存储空间与虚拟存储空间布局完全不同.Linux运行在虚拟存储空间,并负责把系 ...

  4. Yii2的深入学习--行为Behavior

    我们先来看下行为在 Yii2 中的使用,如下内容摘自 Yii2中文文档 行为是 [[yii\base\Behavior]] 或其子类的实例.行为,也称为 mixins,可以无须改变类继承关系即可增强一 ...

  5. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. angularJS实用的开发技巧

    一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...

  7. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  8. Java 哈希表运用-LeetCode 1 Two Sum

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  9. 现代3D图形编程学习-关于本书（译）

    本书系列 现代3D图形编程学习 关于这本书 三维图像处理硬件很快成为了必不可少的组件.很多操作系统能够直接使用三维图像硬件,有些甚至要求需要有3D渲染能力的硬件.同时对于日益增加的手机系统,3D图像硬 ...

  10. 使用CoreProfiler/NanoProfiler实现跨平台&应用的整合性能调试

    摘要 NanoProfiler是一个开源.NET性能调试类库,CoreProfiler是其.NET Core版本的实现.在之前的一些文章中,我曾介绍过NanoProfiler的主要使用方式,以及如何为 ...