一般情况下,我们可以使用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. 面试问题总结二(技术能力-PHP)----Ⅰ

    1.你都做过什么项目? 答:第一份实习工作接触的项目是CRM 销售管理系统,一款用JSP语言开发的进销存管理系统.第一份正式工作是一款主打高质量图片社交社区网站项目,“美啦周末”(后改型为”聊会儿”) ...

  2. [转帖].net 4.8 将不再支持win7 win8 版本

    ZT:https://blogs.msdn.microsoft.com/dotnet/2018/07/18/announcing-net-framework-4-8-early-access-buil ...

  3. Ubuntu 14.04(64bit)使用mentohust连接校园网

    ubuntu14.04系统安装成功之后,需要连接上网络才可以对更新系统以及安装一些必须包.而在学校中,经常遇到的情况需要通过锐捷客户端来连接校园网. 更新: 在Ubuntu14.04下面不用装ment ...

  4. python & dict & switch

    python & dict & switch python 中是没用switch语句的,这应该是体现python大道至简的思想,python中一般多用字典来代替switch来实现. # ...

  5. app流畅度测试--使用FPS Meter

    1.FFPS Meter是一款非常实用的小软件,能够用数字实时显示安卓界面的每秒帧数,非常直观.此外,FPS Meter还可以显示最大帧数.最小帧数以及平均帧数,用来评价安卓流畅度极具价值.由于涉及到 ...

  6. YARN与MapReduce1的对比

    Apache YARN (Yet Another Resource Negotiator)从Hadoop2开始.YARN为集群提供资源管理和Applications的调度.YARN的API用于操作集群 ...

  7. P4596 [COCI2011-2012#5] RAZBIBRIGA

    题目描述 四个等长的单词可以放在一起构成一个正方形,两个单词水平放置,两个竖直放置.水平单词只能从左往右读,竖直的单词只能从上往下读.四个角共用一个字母. 图中是由单词HLAD,NIVA,HSIN,D ...

  8. url基础知识

    浏览器通过url访问服务器步骤 ①浏览器解析出url中的服务器名称 ②浏览器将服务器名称解析成ip(DNS解析) ③浏览器解析出url中的服务器端口(如果有端口的话) ④浏览器建立和web服务器的TC ...

  9. bzoj 1539: [POI2005]Dwu-Double-row

    假设一列交换表示为1,不换表示为0. 身高相同的两个人相当于给其中两列了一个限制条件,要么是两个必须相等,要么一个为零一个为一. 有了关系后我们就可以把每列当成一个点建边,边权为0表示必须相同,1为必 ...

  10. JFreeChart工具类

    需要的jar包: jfreechart-1.0.17.jarjcommon-1.0.24.jar (jfreechart一般只要1.0系列的都可以,jcommon一般任何版本都可以) 效果: 代码: ...