一般情况下，我们可以使用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. 关于Keil C51中“ERROR L107: ADDRESS SPACE OVERFLOW ”的总

    最近写一个关于单片机播放音乐的程序,出现如下错误: *** ERROR L107: ADDRESS SPACE OVERFLOW ... ... Program Size: data=167.6 xd ...

  2. tomcat错误日志监控脚本

    #!/usr/bin/env python #-*-coding:utf-8-*- #CreateDate:2017/04/14 #Author:Eivll0m #ScriptName:monitor ...

  3. PAT 1072 开学寄语

    https://pintia.cn/problem-sets/994805260223102976/problems/994805263964422144 1072 开学寄语(20 分)提问 下图是上 ...

  4. Git命令提交项目代码

    Git客户端安装 今天就结合`GitHub`,通过`Git`命令,来了解如何实现开源代码库以及版本控制 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git 作为唯一的版本库格式进行托 ...

  5. 用go实现的一个堆得数据结构

    用golang实现的堆,主要提供了两个方法,push和pop及堆的大小,代码如下: package main import ( "errors" "fmt" ) ...

  6. windows多线程（三） 原子操作

    一.分析上一篇程序的现象 我们先从上一篇文章中的最后一个程序开始分析. #include <stdio.h> #include <windows.h> const unsign ...

  7. js 时间处理函数 （判断今天是否在一段时间内）

    var curTime = new Date(); //2把字符串格式转换为日期类 var startTime = new Date(Date.parse("2018-3-28 16:44& ...

  8. Caffe使用step by step：使用自己数据对已经训练好的模型进行finetuning

    在经过前面Caffe框架的搭建以及caffe基本框架的了解之后,接下来就要回到正题:使用caffe来进行模型的训练. 但如果对caffe并不是特别熟悉的话,从头开始训练一个模型会花费很多时间和精力,需 ...

  9. crosses initialization of “XXX” 的问题

    在switch-case中定义了变量,用g++编译的时候报错crosses initialization of “XXX” ,在网上一查,说是gcc要求变量的定义不能位于goto之后 将变量定义放在s ...

  10. UVA10047_The Monocycle

    这题....有点奇葩,但是不难. 在矩形方阵里,某人可以往前走或者左拐右拐.都需要消耗一个单位时间. 问某人从一个点走向另一个点的最短时间,并且走过的路程是5的倍数. 由于n,m都小,直接f[n][m ...