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 ...
随机推荐
- Scrum 6.0
sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉很好. 其他人可以了解你的团队在做些什么,并得到重要反馈. 演示是一种社会活动,不同的团队可以在这里相互交流,讨论 ...
- 个人作业-week2(代码复审)
一.代码复审check list 概要部分 代码符合需求和规格说明吗? 符合要求和规格说明,-s指令和-c指令都能实现需求.并且能够处理非法输入. 代码设计是否有周全的考虑? 程序的main函数中对各 ...
- Scrum Meeting Beta - 6
Scrum Meeting Beta - 6 NewTeam 2017/12/5 地点:主南201 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了离线状态本地存储的读取Issue #133Pu ...
- 基于html5的多图片上传,预览
基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...
- python3.6执行AES加密及解密方法
python版本:3.6.2 首先安装pycryptodome cmd执行命令:pip install pycryptodome 特别简单,代码如下: #!/usr/bin/python # -*- ...
- java 基础 --概念--005
1,面向对象特征 封装(encapsulation):隐藏对象的属相和访问细节,仅提供对外公共访问方式.继承(inheritance).多态(polymorphism) 2,类:一组相关的属性和行为的 ...
- 【Java并发编程】之八:多线程环境中安全使用集合API
在集合API中,最初设计的Vector和Hashtable是多线程安全的.例如:对于Vector来说,用来添加和删除元素的方法是同步的.如果只有一个线程与Vector的实例交互,那么,要求获取和释放对 ...
- 80X86计算机组织
计算机主要由运算器.控制器.存储器.和输入输出设备构成. 主频: 主频是指芯片所用的主时钟频率,它直接影响计算机的运行速度,由于处理器体系结构的差别,同样的主频可能产生不同的计算速度,但主频仍然是反映 ...
- Maximum repetition substring POJ - 3693(重复次数最多的连续重复子串)
这题和SPOJ - REPEATS 一样 代码改一下就好了 这个题是求这个重复子串,还得保证字典序最小 巧妙运用sa 看这个 https://blog.csdn.net/queuelovestack ...
- (转)enable_from_this方法的使用与陷阱
转自http://blog.chinaunix.net/uid-442138-id-2122464.html enable_from_this 的使用与实现原理说明: shared_from_ ...