一般情况下，我们可以使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用，例如：

  1. <div style="opacity:0.4; background-image:url(...);">
  2. <div style="opacity:1.0;">
  3. 显示文字
  4. </div>
  5. </div>

文字元素的透明度也会是0.4。

于是想一想，如果有方法只改变背景的透明度就能解决此问题了。

方法1：使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？

方法2：使用RGBA。

例如：

  1. <div style="0, 0, 0.4)">
  2. <div>
  3. 显示文字
  4. </div>
  5. </div>

CSS只改变背景透明度，不改变子元素透明度的更多相关文章

  1. css 只改变父元素的透明度，不改变子元素透明度rgba+opacity

    给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50); 我们通常也会遇到,在给父元素背景设置透明度时,子元素内容继承了父元素的透明度. 如何让子元素脱 ...

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

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

  3. 巧用hover改变css样式和背景

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 6-Qt给父widget加上styleSheet（添加背景图）而不改变子widget的styleSheet的方法

    Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法 比如用stylesheet给widget加背景图,可以用qt designer修改ui文件 ...

  5. Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. CSS总结 最后的选择符和字体、元素常见样式

    在伪类选择符中,还有很多,其中比较有意思的是E:target 当我们想做出点击超链接后链接变色且其他链接变回原来的颜色时,就可以用到这个选择符 <a href="#a1" i ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 使用 CSS MARK 改变 SVG 背景色

    CSS masks -webkit-mask 这个属性是相当强大的,详细的介绍请到这里查看,它非常值得深入研究. -webkit-mask 让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样. ...

  9. CSS Backgrounds（背景）

    CSS Backgrounds(背景) CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background-image backgroun ...

随机推荐

  1. __weak与__block修饰符区别

    API Reference对__block变量修饰符的解释,大概意思: 1.__block对象在block中是可以被修改.重新赋值的. 2.__block对象在block中不会被block强引用一次, ...

  2. 通用的将Excel导入数据集的方法

    http://blog.csdn.net/baronyang/article/details/7048563

  3. 【php】new static的用法

    在一个类中,常见的是new self()操作,代表返回自身类的实例. 当父类中存在方法,然后每个子类继承于父类,调用这个方法会返回自身的实例化对象, <?php class A { functi ...

  4. ASP.NET Core 2 学习笔记

    之前的ASP.NET网站,只要把*.html.*.css.*.jpg.*.png.*.js等静态文件放在项目根目录,默认都可以直接被浏览:但ASP.NET Core 小改了浏览静态文件的方式,默认根目 ...

  5. Python 变量 （上）

    Python通过变量引用内存中的值,变量的值占用多少空间是由变量的类型决定的.声明变量不需要指定变量的类型,解释器会自动根据值来判断.变量名称必须符合标识符的定义 标识符 标识符是由字母,数字和下划线 ...

  6. 概率图模型（PGM）综述-by MIT 林达华博士

    声明:本文转载自http://www.sigvc.org/bbs/thread-728-1-1.html,个人感觉是很好的PGM理论综述,高屋建瓴的总结了PGM的主要分支和发展趋势,特收藏于此. “概 ...

  7. BZOJ3504 CQOI2014危桥（最大流）

    如果只有一个人的话很容易想到最大流,正常桥连限流inf双向边,危桥连限流2双向边即可.现在有两个人,容易想到给两起点建超源两汇点建超汇,但这样没法保证两个人各自到达自己要去的目的地.于是再超源连一个人 ...

  8. C++ STL 常用遍历算法

    C++ STL 常用遍历算法 STL的容器算法迭代器的设计理念 1) STL的容器通过类模板技术,实现数据类型和容器模型的分离 2) STL的迭代器技术实现了遍历容器的统一方法:也为STL的算法提供了 ...

  9. python之插入排序

    插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的.个数加一的有序数据,算法适用于少量数据的排序,时间复杂度为O(n^2).是稳定的排序方法.插入算法把要排序的数组分成两部 ...

  10. 【AGC010F】Tree Game

    Description 有一棵\(n\)个节点的树(\(n \le 3000\)),第\(i\)条边连接\(a_i,b_i\),每个节点\(i\)上有\(A_i\)个石子,高桥君和青木君将在树上玩游戏 ...