一般情况下,我们可以使用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. Redis4.0 主从复制(PSYN2.0)

    Redis4.0版本相比原来3.x版本,增加了很多新特性,如模块化.PSYN2.0.非阻塞DEL和FLUSHALL/FLUSHDB.RDB-AOF混合持久化等功能.尤其是模块化功能,作者从七年前的re ...

  2. 【第二周】PSP

    日期 C类别 C内容 S开始时间 E结束时间 I间隔(单位:分钟) T净时间(单位:分钟) 9月8日 编程 结对编程 12:15 13:15 10 50    编程 结对编程  16:35 17:30 ...

  3. 【Leetcode】86. Partition List

    Question: Given a linked list and a value x, partition it such that all nodes less than x come befor ...

  4. PHP 配置默认SSL CA证书

    1.从CURL 官网下载CA 证书(当然也可以选择自己创建SSL CA证书,详情参考 https://blog.csdn.net/scuyxi/article/details/54898870 ,或自 ...

  5. Alpha 冲刺 —— 十分之七

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 学习MSI.CUDA 试运行软件并调试 ...

  6. Shell中[]里面的条件判断

    1.字符串判断 str1 = str2 当两个串有相同内容.长度时为真 str1 != str2 当串str1和str2不等时为真 -n str1 当串的长度大于0时为真(串非空) -z str1 当 ...

  7. Android Emoji兼容包使用详解

    Emoji兼容性 我们经常会遇到这样的问题: 给朋友发的emoji表情, 在自己手机上展示是正常的, 但是到朋友手机上, 却没有展示出来, 或者展示出来了, 但是也跟自己手机上展示的不一样. 所以,  ...

  8. debian安装filebeat5.5收集nginx日志

    先贴一下我的BELK架构 1.Download and install the Public Signing Key: # wget -qO - https://artifacts.elastic.c ...

  9. Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree

    npm安装时候报这个错误,解决方法如下: 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install 详细参考

  10. HEOI 2017 游记

    HEOI2017也算是落下帷幕了,那就写一篇 流水账 游记好了. DAY 0 又是熟悉的大学,又是熟悉的机房 YD宾馆的房间依旧破的不行. 晚上在房间颓颓颓....=.= DAY 1 上午去试机,唯一 ...