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 ...
随机推荐
- iOS开发值得收藏的博客
http://kobedai.me/ objc.io PS:经典,内容深而广objc中国NSHipster PS:很多小细节NSHipster 中文版唐巧的技术博客 PS:LZ是唐巧的脑残粉…OneV ...
- grep文本处理工具
grep是一款文本过滤工具,基于正则表达式进行模式匹配sed:stream editor 流编辑器awk:linux上实现为gawk,文本报告生成器(格式化文本)文本搜索工具,根据用户指定的模式,对目 ...
- PHP中的PEAR是什么?
PEAR也就是为PHP扩展与应用库(PHP Extension and Application Repository),它是一个PHP扩展及应用的一个代码仓库. 补充:php中扩展pecl与pear ...
- Flyway学习笔记
Flyway做为database migration开源工具,功能上像是git.svn这种代码版本控制.google搜索database migration,或者针对性更强些搜索database mi ...
- Windows系统下搭建Appium自动化测试框架
简介 一种开源的测试框架(http://appium.io/) 能够用来测试原生Android/iOS应用.混合应用以及webapp 通过webdriver协议来操作应用,其核心是一个web服务器,接 ...
- C# 房贷计算器
设计背景 百度小程序中的房贷计算器不能满足我个人的需求,故而开发一个.NET小程序.希望后期能用JS重写,发布在网上供大家使用. 设计思路 根据百度公式:等额本息月还款 = [贷款本金×月利率×(1+ ...
- 关于IT个人看法
对于理科生来说,理论和技术都是相当重要的,我很爱钻牛角尖,但是请理解‘固执的我’, 本人选择IT行业,其实也是偶然,带着质疑的眼光,成为了众多IT男中毫无‘特色’的一员,回忆 学习阶段,逐渐认识了IT ...
- Make a Crystal UVA - 11014 (容斥定理)
题意:给定一个NxNxN的正方体,求出最多能选几个整数点,使得任意两点PQ不会使PQO共线. 思路:利用容斥原理,设f(k)为点(x, y, z)三点都为k的倍数的点的个数(要扣掉一个原点O),那么所 ...
- C++ STL 常用算术和生成算法
C++ STL 常用算术和生成算法 accumulate() accumulate: 对指定范围内的元素求和,然后结果再加上一个由val指定的初始值. #include<numeric> ...
- STL Set和multiset 容器
STL Set和multiset 容器 set/multiset的简介 set是一个集合容器,其中所包含的元素是唯一的,集合中的元素按一定的顺序排列. 元素插入过程是按排序规则插入,所以不能指定插入位 ...