CSS只改变背景透明度,不改变子元素透明度

一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如:

Html代码  

  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。

例如:

Html代码  

  1. <div style="0, 0, 0.4)">
  2. <div>
  3. 显示文字
  4. </div>
  5. </div>
时间: 2024-10-25 22:00:14

CSS只改变背景透明度,不改变子元素透明度的相关文章

IOS只改变父视图的的透明度,不会改变子View的透明度

//正在滚动 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ float offset_Y = scrollView.contentOffset.y; NSLog(@"%f",scrollView.contentOffset.y); UIView *barView = [self.navigationController.view viewWithTag:1000]; if (offset_Y == -20) { //col

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

html中如何使得改变背景的透明度时,背景上的文字透明度不被改变

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 .div1{ 8 width: 15

css设置元素透明度代码实例

css设置元素透明度代码实例:本章节介绍一下如何设置一个元素的透明度,现在众多的效果都有使用,下面就介绍一下如何实现此效果.w3c提供了一种标准的设置透明度的属性opacity,此属性值大小是介于0-1之间的,0为完全透明,1为完全不透明.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=

css selection改变文字反选的背景颜色

<style type="text/css"><!--.ai::-moz-selection { background:#cc0000; color:#fff; }.ai::selection { background:#cc0000; color:#fff; }.av::-moz-selection { background:#FFCC00; color:#CC33FF; }.av::selection { background:#FFCC00; color:#CC

CSS初识- 选择器 &amp;背景&amp; 浮动&amp; 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

css里的背景属性有哪些,如何去使用哪些属性

分类:纯色背景    背景图像 1.背景颜色 background-color : 任意合法的颜色 和 transparent 2.背景图像 background-image : url(想要加载的图片) 3.背景图片平铺 background-repeat : repeat:默认值水平垂直方向都平铺 repeat-x : 水平方向平铺    repeat-y : 垂直方向平铺    no-repeat : 默认不平铺 4.背景图片的尺寸 background-size : value1   

第17章 CSS边框与背景(上)

第 17章 CSS边框和背景[上]学习要点:1.声明边框2.边框样式3.圆角边框 本章主要探讨 HTML5中 CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观.一.声明边框边框的声明有三个属性设置,样式表如下:属性 值 说明 CSS版本border-width 长度值 设置边框的宽度,可选 1border-style 样式名称 设置边框的样式,必选 1border-color 颜色值 设置边框的颜色,可选 1 这三个属性值,只有 border-style是必须声明,才可以出现边

jQuery CSS()方法改变CSS样式实例解析

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘