一般情况下，我们可以使用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模块子系统实现简述

    一.模块加载方法 1.在配置文件或者启动参数里面通过<loadmodule /path/to/mymodule.so args>指令加载 2.Redis启动后,通过<module l ...

  2. Scrum 5.0(继4.0)

    一,组员任务完成情况 首页设计初步完成但是需要优化界面,只能简单的输出信息和在首页进行登录.界面极其简单. 鸡汤版面设计有困难,问题在于用何种形式来管理用户的数据上传,但是经过小组间的讨论确定设计方向 ...

  3. 1014 C语言文法定义与C程序的推导过程

    <程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> ...

  4. PAT 甲级 1010 Radix

    https://pintia.cn/problem-sets/994805342720868352/problems/994805507225665536 Given a pair of positi ...

  5. poj 1523 SPF(双连通分量割点模板)

    题目链接:http://poj.org/problem?id=1523 题意:给出无向图的若干条边,求割点以及各个删掉其中一个割点后将图分为几块. 题目分析:割点用tarjan算法求出来,对于每个割点 ...

  6. 笔记：delphi 与 Query

    以下不保存证正确 Query用SQL语言执行过的,没有必要Cancel.Post,因为其会对数据库直接操作:执行Update.Insert.Delete请用SQL语句: 用Table使用对当前记录直接 ...

  7. Linux下cp ~中关于“~”的疑问

    目的:将wi主文件夹下的.bashrc复制到/tmp,并更名为bashrc.对于书上的代码上加“~”存在疑问. cp ~/.bashrc /tmp/bashrc 对命令进行了以下尝试: 为什么不加“~ ...

  8. 【bzoj4031】[HEOI2015]小Z的房间 解题报告

    [bzoj4031][HEOI2015]小Z的房间 Description 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含\(n*m\)个格子的格状矩形,每个格子是一个房 ...

  9. Linux kernel（CVE-2018-17182）提权漏洞复现

    0x01 漏洞前言 Google Project Zero的网络安全研究人员发布了详细信息,并针对自内核版本3.16到4.18.8以来Linux内核中存在的高严重性漏洞的概念验证(PoC)漏洞利用.由 ...

  10. STS导入Gradle项目出现 Could not create task of type 'DependencyManagementReportTask'

    解决方法: 在build.gradle文件下添加如下: classpath 'io.spring.gradle:dependency-management-plugin:0.6.1.RELEASE'