CSS只改变背景透明度,不改变子元素透明度
一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如:
- <div style="opacity:0.4; background-image:url(...);">
- <div style="opacity:1.0;">
- 显示文字
- </div>
- </div>
文字元素的透明度也会是0.4。
于是想一想,如果有方法只改变背景的透明度就能解决此问题了。
方法1:使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?
方法2:使用RGBA。
例如:
- <div style="0, 0, 0.4)">
- <div>
- 显示文字
- </div>
- </div>
CSS只改变背景透明度,不改变子元素透明度的更多相关文章
- css 只改变父元素的透明度,不改变子元素透明度rgba+opacity
给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50); 我们通常也会遇到,在给父元素背景设置透明度时,子元素内容继承了父元素的透明度. 如何让子元素脱 ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
- 巧用hover改变css样式和背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 6-Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法
Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法 比如用stylesheet给widget加背景图,可以用qt designer修改ui文件 ...
- Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- CSS总结 最后的选择符和字体、元素常见样式
在伪类选择符中,还有很多,其中比较有意思的是E:target 当我们想做出点击超链接后链接变色且其他链接变回原来的颜色时,就可以用到这个选择符 <a href="#a1" i ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 使用 CSS MARK 改变 SVG 背景色
CSS masks -webkit-mask 这个属性是相当强大的,详细的介绍请到这里查看,它非常值得深入研究. -webkit-mask 让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样. ...
- CSS Backgrounds(背景)
CSS Backgrounds(背景) CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background-image backgroun ...
随机推荐
- Enterprise Library 6.0 参考源码索引
http://www.projky.com/entlib/6.0/Diagnostics/Tracing/DiaLib.cs.htmlhttp://www.projky.com/entlib/6.0/ ...
- vue 使用出现的问题(持续记录)
今天写vue 的时候,发现有几个警告.原因是 我把组件起的名字写的和默认标签的名字一样了,导致系统不知道,怎么解析. 我写了一个Header 组件, 和h5里面的header重名, 解决方案1: he ...
- 【第十周】四则运算GUI
下载地址:http://pan.baidu.com/s/1hsc9HRm 这次比上次多了一个记录的功能,是用QT里面的qplaintextedit记录显示出做过的题目. 我是直接看的文档,发现窗体,搜 ...
- 用node研究axios前后端交互状态码规则
研究状态码规则围绕我的脑袋有些时间了. 加上最近比较不忙,开始了这方面的研究. 后端用的是直接跑过的node框架,express.可以直接参考express官方网站:http://www.expres ...
- Python fullstack系列【2】Python数据类型
基本数据类型 学习一门编程语言通常都是先了解其不同的数据类型,以及每种数据类型对象所附带的方法,Python也不例外,本篇就详细介绍下这部分. Python基本数据类型总览: 1.Booleans(布 ...
- Codeforces 449B_Jzzhu and Cities
给一个无向图,外加一些特殊的连接原点的无向边.在不改变原点与所有点的最短路的情况下,最多可以删除多少条特殊边? 首先我们把所有的边夹杂在一起.spfa跑出与所有点的最短路. 接下来我们通过一次bfs来 ...
- jQuery Mobile页面跳转后未加载外部JS原因分析及解决
在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data ...
- springmvc接收date类型参数
springmvc在表单提交接收date类型参数的时候会报错:Cannot convert value of type [java.lang.String] to required type [jav ...
- DB2 Vs MySQL系列 | MySQL与DB2的数据类型对比
随着MySQL数据库的应用越来越广泛,DB2向MySQL数据库的迁移需求也越来越多.进行数据库之间迁移的时候,首先遇到的并且也是最基本最重要的就是两种数据库数据类型之间的转换. 相关阅读: 从商用到开 ...
- 第三周 构造一个简单的Linux系统
20135331文艺 首先 在上周内容中我们学习了 计算机三个法宝: 1.存储程序计算机 2.函数调用堆栈 3.中断 本周中得知 操作系统两把宝剑: 1.中断上下文的切换:保存现场和恢复现场 2.进程 ...