`
thierry.xing
  • 浏览: 665218 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
580fa9c1-4a0c-3f40-a55a-c9256ce73302
Sencha Touch中...
浏览量:0
社区版块
存档分类
最新评论

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="background-color:rgba(0, 0, 0, 0.4)">
   <div>
      显示文字
   </div>
</div>

 

 

 

 

0
2
分享到:
评论

相关推荐

    CSS如何只改变父元素背景透明度不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: 复制代码代码如下: &lt;div xss=removed&gt; &lt;div xss=removed&gt; 显示...

    CSS代码实现背景透明而文字不透明

    但需要注意的是,`opacity` 会影响整个元素及其子元素的透明度,包括文字。为了只让背景透明,我们可以使用一个包含背景的伪元素,如 `::before` 或 `::after`: ```css 元素选择器 { position: relative; } 元素...

    html+css透明背景

    但是,当为整个元素设置`opacity`时,该元素及其所有子元素都会受到此透明度的影响,包括内容。例如: ```css .box { background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ opacity: 0.5; /* 全元素半...

    Qt 控件透明度设置方法总结

    首先,Qt中的控件透明度主要涉及到窗口组件(QWidget)的背景透明和前景元素(如QLabel、QPushButton等)的透明。对于窗口组件,我们可以通过设置其窗口属性来调整其透明度。 1. **使用Qt的窗口属性:** - `Qt::WA...

    css半透明效果

    如果只想改变元素背景的透明度,而不影响子元素,我们可以使用`background-color`的RGBA值。RGBA是RGB颜色模型的扩展,多了个A(Alpha)通道,用于表示透明度。例如,创建一个背景色为半透明红色的元素: ```css ....

    css 背景半透明最佳实践

    需要注意的是,IE9虽然支持`filter`属性,但它会与`background-color`叠加,导致透明度不准确。为了解决这个问题,可以通过IE条件注释或特定选择器来针对性地修改IE9的`filter`值。 示例代码如下: ```css ....

    背景透明css

    这个属性可以设置元素及其所有子元素的整体不透明度。例如: ```css div { opacity: 0.5; } ``` 在这个例子中,`div`元素及其中的所有内容都会变得半透明。然而,`opacity`会影响元素及子元素的全部颜色,包括...

    css3系列教程(透明度).rar

    在CSS3中,透明度(Opacity)是一个强大的特性,它允许我们控制元素及其所有子元素的总体透明程度。本教程将深入探讨这个话题,并通过实例帮助你理解和掌握如何使用CSS3透明度来创建引人入胜的网页效果。 首先,...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    2. 使用CSS定义图片和遮罩的初始样式,例如设置遮罩的透明度为0,以便在未悬停时不可见。 ```css .image-container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; ...

    CSS实现半透明效果

    如果只想改变背景的透明度,可以使用`background-color`的 rgba(红绿蓝阿尔法)值,阿尔法通道(Alpha Channel)就是用来控制透明度的: ```css .element { background-color: rgba(255, 255, 255, 0.5); } ``` ...

    详解CSS-opacity子元素继承父元素透明度的解决方法

    为了避免子元素继承父元素的透明度,可以改变父元素的背景颜色设置方式,从使用`opacity`属性改为使用`rgba()`函数。`rgba()`允许指定颜色的红绿蓝通道(RGB)和一个透明度通道(alpha),如`rgba(0, 0, 0, 0.5)`...

    css背景颜色透明-base.css-master.zip

    这种方法只影响背景颜色,不会影响子元素的透明度。 3. **Hsla颜色值**: 类似于RGBA,HSLA(色调、饱和度、亮度、alpha)允许在色相、饱和度和亮度的基础上指定透明度。例如: ```css .element { background-...

    css实现下拉菜单透明资料

    通过CSS,我们可以控制这些元素的样式,包括颜色、字体、布局以及透明度。 在“来自微软的纯CSS下拉菜单 - 小李刀刀 - 博客园.mht”文件中,你可以找到一个纯CSS实现的下拉菜单示例。这个例子展示了如何利用伪类...

    CSS3蓝色透明方块背景特效.zip

    在CSS中,`opacity`属性可以控制整个元素的透明度,包括其内容和子元素。例如,`opacity: 0.5;`将使元素及其所有内容变得半透明。然而,使用`rgba()`可以更精确地控制背景的透明度,而不影响元素内的其他内容。 ...

    div设置背景图片透明度且字不透明

    1. 将背景图片设置为`div`的子元素,并使用`opacity`属性调整图片透明度。 2. 确保文字位于背景图片之上,使用不同的`div`或层进行定位。 3. 设置文字颜色,确保其与透明背景有足够对比,以便清晰阅读。 4. 若需设置...

    CSS应用---透明圆角

    若只想改变背景的透明度,可以使用CSS3的`background-color`与`rgba()`函数。`rgba()`接受四个参数:红、绿、蓝通道的强度(取值0-255),以及一个介于0和1之间的透明度值。例如,创建一个背景色为半透明的红色块: ...

    CSS样式设置元素的透明度以50%为例

    在某些情况下,可能只需要让元素背景透明,而不影响其子元素。这时可以使用rgba颜色值来单独设置背景颜色和透明度,例如: ```css .transparent_background { background-color: rgba(0, 0, 0, 0.5); /* 黑色背景...

    css 背景透明 元素(标签)背景透明的css设计

    需要注意的是,`opacity` 属性会影响元素内的所有内容(包括文字和图片),若只想让背景透明而文字不透明,可以采用层叠样式表(CSS)中的层叠和继承机制,通过将背景和文字放在不同的子元素上来分别控制。...

Global site tag (gtag.js) - Google Analytics