一般情况下,我们可以使用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. 学习jenv

    背景 生活不只是眼前的苟且, 还有诗和远方. 上个月工作需要启动了一个小项目, 按最初的计划会用JDK8. 但当计划报上去后, 运维部门出于后续升级维护的考虑, 不允许使用已经出来4年多的JDK8了, ...

  2. json对象与json字符串的区别

    最近糟了这个坑,同一个方法,android和ios返回的数据不一样,一个是json字符串,另一个是json对象(至于为什么后台返回的是json对象,还没找到原因,但是我看到的后台的代码是有在返回之前给 ...

  3. cmd 中运行testng代码

    说明:classpath是jvm执行class时所加载的路径:--个人理解,如有不同:QQ:316567803 1.先下载插件 https://plugins.jetbrains.com/plugin ...

  4. 【vue】router-link 与 router-view

    1 router-link <router-link :to="{ path: '/hello', component: HelloWorld }">hello< ...

  5. vi命令文件编辑

    vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器. Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能 ...

  6. TypeError: to_categorical() got an unexpected keyword argument 'nb_classes'

    在学习莫烦教程中keras教程时,报错:TypeError: to_categorical() got an unexpected keyword argument 'nb_classes',代码如下 ...

  7. 【转】嵌入式Linux驱动面试题三道

    题一: Linux设备中字符设备与块设备有什么主要的区别? 字符设备:字符设备是个能够像字节流(类似文件)一样被访问的设备,由字符设备驱动程序来实现这种特性.字符设备驱动程序通常至少实现open,cl ...

  8. 数据挖掘领域经典分类算法 —— C4.5算法(附python实现代码)

    目录 理论介绍 什么是分类 分类的步骤 什么是决策树 决策树归纳 信息增益 相关理论基础 计算公式 ID3 C4.5 python实现 参考资料 理论介绍 什么是分类 分类属于机器学习中监督学习的一种 ...

  9. Linux内核设计与实现第十周读书笔记

    第十七章 设备与模块 关于设备驱动与设备管理,我们讨论四种内核成分. 设备类型 模块 内核对象 sysfs 17.1设备类型 在Linux以及所有Unix系统中,设备被分为以下三种类型: 块设备,块设 ...

  10. Java之字节数组和字符串的转换问题

    今天在使用字节流复制图片的时候发现一个问题,就是将字节数组转化为字符串的时候会出现长度不同的问题.这其实是个错误的操作. public static void main(String[] args) ...