关于html：如何使用CSS为文本或图像提供透明背景？

How do I give text or an image a transparent background using CSS?

是否可以仅使用css使元素的EDOCX1[0]半透明，但使元素的内容(文本和图像)不透明？

我希望在不将文本和背景作为两个独立元素的情况下完成这一任务。

尝试时：

1
2
3
4
5
6
7
8
9
10
11
12

p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}

span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}

1
2
3
4
5

Hello world

看起来子元素受到其父元素的不透明度的影响，因此opacity:1相对于父元素的opacity:0.6。

相关讨论

使用半透明PNG图像或使用CSS3：

1	background-color:rgba(255,0,0,0.5);

以下是css3.info，opacity，rgba and commervation(2007-06-03)的一篇文章。

相关讨论

在火狐3和Safari 3中，你可以使用类似rgba的georg sch？提到LLY。

一个鲜为人知的技巧是，您可以在Internet Explorer中使用它，也可以使用渐变过滤器。

1 2	background-color: rgba(0, 255, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

第一个十六进制数定义颜色的alpha值。

完整解决方案所有浏览器：

1
2
3
4
5
6
7
8
9
10

.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

这是通过rgba和过滤器，在不影响子元素的情况下从CSS背景透明度得到的。

截图结果证明：

这是在使用以下代码时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
An XHTML 1.0 Strict standard template
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>

<body>


Here some content (text AND images)"on top of the transparent background"

<img src="http://i.imgur.com/LnnghmF.gif">

</body>
</html>

Chrome-33 IE11 IE9 IE8

相关讨论

这是我能想到的最好的解决方案，而不是使用CSS 3。据我所见，它在Firefox、Chrome和Internet Explorer上都很管用。

将一个容器DIV和两个子DIV放在同一级别，一个用于内容，一个用于背景。使用CSS，自动调整背景大小以适应内容，并使用z-index将背景实际放在后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}

1 2	Here is the content. <br />Background should grow to fit.

相关讨论

对于简单的半透明背景色，上述解决方案(CSS3或BG图像)是最佳选择。但是，如果你想做一些更有趣的事情(例如动画、多个背景等)，或者如果你不想依赖CSS3，你可以尝试"窗格技术"：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
position: relative;
}

.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
position: relative;
z-index: 10;
}

1
2
3
4
5

Hello world

该技术通过在外窗格元素内部使用两个"层"来工作：

一个("back")，适合窗格元素的大小，但不影响内容的流动，
以及一个包含内容并帮助确定窗格大小的("cont")。

面板上的position: relative非常重要；它告诉后面的层适应面板的大小。(如果您需要将

标签设置为绝对标签，请将窗格从

更改为并将所有内容包装在绝对位置

标签中。)

与上面列出的类似技术相比，此技术的主要优势在于窗格不必是指定的大小；如上所述，它将适合全宽(正常的块元素布局)，并且仅与内容一样高。外窗格元素可以任意调整大小，只要它是矩形的(即内联块可以工作；普通的旧内联不会工作)。

此外，它还为背景提供了很大的自由度；您可以自由地在back元素中放置真正的任何内容，并且不影响内容的流动(如果您想要多个全尺寸的子层，只需确保它们也具有位置：绝对、宽度/高度：100%和顶部/底部/左/右：自动)。

允许背景插入调整(通过顶部/底部/左侧/右侧)和/或背景固定(通过删除左侧/右侧或顶部/底部对之一)的一种变体是使用以下CSS：

1
2
3
4
5

.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}

如前所述，这在firefox、safari、chrome、ie8+和opera中有效，尽管ie7和ie6需要额外的css和expressions、iirc，而且上一次我检查时，第二个css变体在opera中不起作用。

注意事项：

不包含控制层内的浮动元素。你需要确保它们被清除或者被其他方式控制，否则它们会滑出底部。
页边距在pane元素上，填充在cont元素上。不要使用相反的页面(在控制面板上的页边距或填充)，否则会发现一些奇怪的地方，比如页面总是比浏览器窗口略宽。
如前所述，整个事情需要是块或内联块。可以使用而不是来简化CSS。

更全面的演示，通过与display: inline-block和auto及特定widths/min-heights一起使用，展示该技术的灵活性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}

.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Pane content. 
Pane content.






Pane content. 
Pane content. 
Pane content. 
Pane content. 
Pane content. 
Pane content. 
Pane content. 
Pane content. 
Pane content.






Pane content. 
Pane content.






Pane content. 
Pane content.

下面是广泛使用的技术的现场演示：

christmas-card-2009.slippyd.com screenshot

相关讨论

最好使用半透明的.png。

只需打开photoshop，创建一个2x2像素图像(选择1x1会导致Internet Explorer错误！)，将其填充为绿色，并将"图层"选项卡中的不透明度设置为60%。然后保存它并使其成为背景图像：

1 2	<p style="background: url(green.png);">any text </p>

当然，它很酷，除了可爱的Internet Explorer 6。有更好的修复方法，但这里有一个快速的黑客：

1
2
3

p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

相关讨论

有一个最小化标记的技巧：使用伪元素作为背景，您可以设置不透明度，而不影响主元素及其子元素：

演示

输出：

Background opacity with a pseudo element

相关讨论

此方法允许您在背景中使用图像，而不仅仅是纯色，还可以用于在其他属性(如边框)上具有透明度。不需要透明的PNG图像。

在css中使用:before(或:after并给它们不透明度值，使元素保持其原始不透明度。因此，您可以使用：before来制作一个人造元素，并为其提供所需的透明背景(或边框)，并将其移到您希望使用z-index保持不透明的内容后面。

示例(fiddle)(注意，类为dad的DIV只是为了提供一些上下文和与颜色的对比，实际上不需要这个额外的元素，红色矩形向下移动一点，向右移动一点，以便在fancyBg元素后面留下可见的背景)：

1	Test text that should have solid text color lets see if we can manage it without extra elements

用这个CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}

在这种情况下，.fancyBg:before具有您希望具有透明度的css属性(本例中为红色背景，但可以是图像或边框)。它被定位为绝对值，将其移到.fancyBg之后(使用零或更适合您需要的任何值)。

问题是，在您的示例中，文本实际上具有完全的不透明度。它在p标记内具有完全不透明性，但p标记只是半透明的。

您可以添加一个半透明的PNG背景图像，而不是在CSS中实现它，或者将文本和DIV分隔为2个元素，并将文本移动到框上(例如，负边距)。

否则就不可能了。

编辑：

就像克里斯提到的：如果你使用一个透明的PNG文件，你必须使用一个javascript解决方案，使它在烦人的Internet Explorer中工作…

几乎所有这些答案都假设设计师想要纯色背景。如果设计者真的想要一张照片作为背景，那么目前唯一真正的解决方案就是像其他地方提到的jquerytransify插件那样的javascript。

我们需要做的是加入CSS工作组讨论，让他们给我们一个背景不透明度属性！它应该与多背景功能一起工作。

以下是我如何做到这一点(这可能不是最佳的，但很有效)：

创建希望半透明的div。给它一个类/ID。让它空着，然后关闭它。给它一个设定的高度和宽度(例如，300像素乘300像素)。给它0.5的不透明度或你喜欢的任何东西，和背景色。

然后，在该分区的正下方，创建另一个具有不同类/ID的分区。在其中创建一个段落，在其中放置文本。给出div位置：相对，顶部：-295px(即负295像素)。给它一个2的z指数作为好的度量，并确保它的不透明度是1。按照你喜欢的样式编排段落，但是要确保尺寸小于第一个div的尺寸，这样它就不会溢出。

就是这样。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11

这在Safari 2.x中有效，我不了解Internet Explorer。

相关讨论

这里有一个jquery插件，它可以为您处理所有事情，transify(transify——一个jquery插件，可以轻松地将透明度/不透明度应用于元素的背景)。

我不时地遇到这个问题，所以我决定写些能让生活轻松很多的东西。该脚本小于2 KB，只需要1行代码即可使其正常工作，如果您愿意，它还将处理设置背景不透明度动画。

不久前，我用CSS在跨浏览器的背景透明度中写下了这一点。

奇怪的是，InternetExplorer6将允许您使背景透明，并使顶部的文本完全不透明。对于其他浏览器，我建议使用透明的PNG文件。

不透明度的背景，但不是文字有一些想法。要么使用半透明图像，要么覆盖一个附加元素。

如果你是一个photoshop人，你也可以使用：

1
2
3

#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}

或：

1
2
3

#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

为了使元素的背景半透明，但使元素的内容(文本和图像)不透明。您需要为该图像编写CSS代码，并且必须添加一个名为不透明度的最小值属性。例如

1
2
3
4
5

.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}

//越小值越透明，越少值越透明。

相关讨论

CSS3可以很容易地解决您的问题。用途：

1	background-color:rgba(0,255,0,0.5);

这里，rgba代表红色、绿色、蓝色和alpha值。绿色值是由于255而获得的，半透明度是由0.5α值获得的。

背景色：rgba(255,0,0,0.5)；如上所述，简单来说是最好的答案。可以说，即使在2013年，使用CSS3也不简单，因为不同浏览器的支持级别会随着每次迭代的变化而变化。

虽然所有主要浏览器(不是CSS3的新版本)都支持background-color[1]但alpha透明可能很棘手，特别是在9版之前的Internet Explorer和5.1版之前的Safari上的边框颜色。〔2〕

使用Compass或Sass之类的工具可以真正帮助生产和跨平台兼容性。

[1]w3schools:css背景颜色属性

[2]诺曼博客：浏览器支持清单CSS3(2012年10月)

如果使用较少，可以使用fade(color, 30%)。

您可以使用渐变语法(ab)为Internet Explorer 8解决此问题。颜色格式为argb。如果使用SASS预处理器，则可以使用内置函数"ie-hex-str()"转换颜色。

1 2	background: rgba(0,0,0, 0.5); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

您可以使用纯css 3:rgba(red, green, blue, alpha)，其中alpha是您想要的透明度级别。不需要使用javascript或jquery。

下面是一个例子：

1
2
3

#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}

1	<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">

http://jsfiddle.net/x2ukko7u/？

在同一个分区中，有一个更简单的解决方案可以将一个覆盖图覆盖在一个图像上。这不是这个工具的正确使用。但它的工作方式就像是一种魅力，可以使用CSS来制作覆盖。

使用这样的插入阴影：

1	box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

就是这样：

您可以在CSS中使用rgba (red, green, blue, alpha)，如下所示：

所以，简单地做一些这样的事情就可以了：

1
2
3
4
5
6
7
8

p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}

span {
color: white;
}

You can do with rgba color code using css like this example given bellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.imgbox img{
height:100px;
width:200px;
position:relative;
}
.overlay{
background:rgba(74, 19, 61, 0.4);
color:#fff;
text-shadow:0px 2px 5px #000079;
height:100px;
width:300px;
position:absolute;
top:10%;
left:25%;
padding:25px;
}

1
2
3
4
5

<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">


This is Simple Text.

根据我的观点，使用不透明度背景色的最佳方法。如果我们使用此方法，则不会丢失其他元素(如测试颜色和边框等)的不透明度。

1	background-color: rgba(71,158,0,0.8);

使用不透明度的背景色

背景色：rgba(r，g，b，不透明度)；

enter image description here

我通常把这门课用在工作上。很不错。

1
2
3
4
5
6

.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}

您可以在RGB(63245,0)中使用不透明度类似于此颜色代码的RGB颜色，并添加不透明度类似于(63245,0,0.5)，还可以添加RGB替换RGB。不透明度的使用

1
2
3

div{
background:rgba(63,245,0,0.5);
}