CSS背景不透明度[重复]

本文翻译自：CSS Background Opacity [duplicate]

This question already has an answer here: 这个问题已经在这里有了答案：

How do I give text or an image a transparent background using CSS? 如何使用CSS为文本或图像提供透明背景？ 28 answers 28个答案

I am using something similar to the following code: 我正在使用类似于以下代码的内容：

<div style="opacity:0.4; background-image:url(...);"><div style="opacity:1.0;">Text</div>
</div>

I expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. 我希望这可以使背景的不透明度为0.4，文本的不透明度为100％。 Instead they both have an opacity of 0.4. 相反，它们都具有0.4的不透明度。

#1楼

参考：https://stackoom.com/question/hjU5/CSS背景不透明度-重复

#2楼

Children inherit opacity. 儿童会遗传不透明度。 It'd be weird and inconvenient if they didn't. 如果他们不这样做，那将会很奇怪和不便。

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color. 您可以为背景图像使用半透明的PNG文件，也可以为背景颜色使用RGBa（α表示）颜色。

Example, 50% faded black background: 例如，50％的黑色背景褪色：

 <div style="background-color:rgba(0, 0, 0, 0.5);"> <div> Text added. </div> </div>

#3楼

This is because the inner div has 100% of the opacity of the div it is nested in (which has 40% opacity). 这是因为内部div具有嵌套的div的不透明度的100％（不透明度为40％）。

In order to circumvent it, there are a few things you could do. 为了规避它，您可以做一些事情。

You could create two separate divs like so: 您可以这样创建两个单独的div：

<div id="background"></div>
<div id="bContent"></div>

Set your desired CSS opacity and other properties for the background and use the z-index property ( z-index ) to style and position the bContent div. 为背景设置所需的CSS不透明度和其他属性，并使用z-index属性（ z-index ）设置bContent div的样式和位置。 With this you can place the div overtope of the background div without having it's opacity mucked with. 这样，您可以将div放置在背景div的上方，而不会使其变得不透明。

Another option is to RGBa . 另一种选择是RGBa 。 This will allow you to nest your divs and still achieve div specific opacity. 这将允许您嵌套div并仍然实现div特定的不透明度。

The last option is to simply make a semi transparent .png image of the color you want in your desired image editor of choice, set the background-image property to the URL of the image and then you won't have to worry about mucking about with the CSS and losing the capability and organization of a nested div structure. 最后一个选择是简单地在所需的图像编辑器中制作所需颜色的半透明.png图像，将background-image属性设置为图像的URL，这样就不必担心变色了。使用CSS并失去嵌套div结构的功能和组织。

#4楼

I would do something like this 我会做这样的事情

<div class="container"><div class="text"><p>text yay!</p></div>
</div>

CSS: CSS：

.container {position: relative;
}.container::before {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url('/path/to/image.png');opacity: .4;content: "";z-index: -1;
}

It should work. 它应该工作。 This is assuming you are required to have a semi-transparent image BTW, and not a color (which you should just use rgba for). 这是假设您需要具有半透明的图像BTW，而不是颜色（应使用rgba来实现）。 Also assumed is that you can't just alter the opacity of the image beforehand in Photoshop. 还假定您不能只预先在Photoshop中更改图像的不透明度。

#5楼

You can use CSS 3 :before to have a semi-transparent background and you can do this with just one container. 您可以使用CSS 3 :before具有半透明的背景，并且只用一个容器即可。 Use something like this 使用这样的东西

<article>Text.
</article>

Then apply some CSS 然后应用一些CSS

article {position: relative;z-index: 1;
}article::before {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;  opacity: .4; z-index: -1;background: url(path/to/your/image);
}

Sample: http://codepen.io/anon/pen/avdsi 范例： http ： //codepen.io/anon/pen/avdsi

Note: You might need to adjust the z-index values. 注意：您可能需要调整z-index值。

#6楼

The following methods can be used to solve your problem: 可以使用以下方法解决您的问题：

CSS alpha transparency method (doesn't work in Internet Explorer 8): CSS alpha透明方法（在Internet Explorer 8中不起作用）：
```
 #div{background-color:rgba(255,0,0,0.5);} 
```
Use a transparent PNG image according to your choice as background. 根据您的选择使用透明的PNG图像作为背景。
Use the following CSS code snippet to create a cross-browser alpha-transparent background. 使用以下CSS代码段创建跨浏览器的alpha透明背景。 Here is an example with #000000 @ 0.4% opacity 这是不透明度为0.4％时#000000的示例
```
 .div { background:rgb(0,0,0); background: transparent\\9; background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom: 1; } .div:nth-child(n) { filter: none; } 
```

For more details regarding this technique, see this , which has an online CSS generator. 有关此技术的更多详细信息，请参阅this ，它具有一个在线CSS生成器。

CSS背景不透明度[重复]相关推荐

css背景图重复怎们弄,CSS如何实现背景图像重复效果
背景图像重复效果,相信大家都有在各大网站上见过.一个好看的背景图片重复效果,可以使我们的网页样式更加美观,内容更加丰富.我们可以通过CSS中background的相关属性来实现这种效果. 推荐参考:& ...
html 页面重复度高,html – CSS背景渐变重复问题
我有一个需要扩展宽度和高度的html页面,所以需要能够上下左右滚动,但是我似乎无法使css渐变重复-x并向下留下纯色. 剥离代码: /p> "http://www.w3.org/TR/ ...
不透明度html,关于html：CSS背景不透明度
本问题已经有最佳答案,请猛点这里访问. 我使用类似于以下代码的东西: Text 我预计这会使背景的不透明度为0.4,文本的不透明度为100%. 相反,它们的不透明度均为0.4. 这是我的解决方案:Te ...
css背景图片重复相关知识
通过 background-repeat属性可以给插入的背景图片设置是否要重复,及按怎样重复. 该属性可能的值值描述 repeat 默认.背景图像将在垂直方向和水平方向重复. repeat-x 背 ...
CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂）
目录 CSS背景 CSS 背景色实例其他元素实例不透明度 / 透明度实例使用 RGBA 的透明度实例 CSS 背景图像实例实例实例 CSS 背景重复实例实例 CSS backg ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
php中背景图怎么设置不重复,css 图像不重复怎么设置
css图像不重复的设置方法:首先创建一个HTML示例文件:然后引入一张背景图片:最后通过设置属性为"background-repeat:no-repeat"来实现图像不重复即可. ...
用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...

CSS背景不透明度[重复]

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

CSS背景不透明度[重复]相关推荐

最新文章

热门文章