如何使用 CSS 为文本或图像提供透明背景?

仅使用 CSS,是否可以使元素的background半透明,但元素的内容(文本和图像)不透明?

我想在没有文本和背景作为两个独立元素的情况下完成此操作。

尝试时:

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

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

子元素似乎受到其父级的不透明度的影响,因此opacity:1相对于父级的opacity:0.6

答案

使用半透明的PNG图像或使用 CSS 3:

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

这是来自 css3.info, 不透明度,RGBA 和妥协的文章 (2007-06-03)。


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

在 Firefox 3 和 Safari 3 中,您可以像提到的 GeorgSchölly 一样使用 RGBA。

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

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

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

完整解决方案的所有浏览器:

.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 和 filterCSS 背景透明而不会影响子元素的

屏幕截图显示结果:

这是在使用以下代码时:

<head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <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>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

铬33IE11IE9IE8

这是我能想到的最好的解决方案,而不是使用 CSS3。据我所知,它在 Firefox,Chrome 和 Internet Explorer 上运行良好。

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

.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;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

对于简单的半透明背景色,上述解决方案(CSS 3 或背景图像)是最佳选择。但是,如果您想做一些更奇妙的事情(例如动画,多个背景等),或者不想依靠 CSS 3,则可以尝试 “窗格技术”:

.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;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

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

  • 一个适合窗格元素大小而不影响内容流的(“后”),
  • 另一个包含内容并有助于确定窗格大小的(“cont”)。

position: relative窗格上的position: relative很重要;它告诉后层适合窗格的大小。 (如果需要<p>标记是绝对的,请将窗格从<p>更改为<span>并将所有内容包装在绝对位置的<p>标记中。)

与上面列出的类似技术相比,此技术的主要优点是窗格不必为指定的大小。如上面的代码所示,它将适合全宽(正常的块元素布局),并且仅与内容一样高。外部窗格元素的大小可以任意选择,只要它是矩形即可(即,内联块将起作用;普通的内联将不起作用)。

此外,它还为您提供了很大的背景自由度;您可以随意将任何东西放到 back 元素中,并且不影响内容的流动(如果您想要多个全尺寸子层,只需确保它们也具有以下位置:绝对值,宽度 / 高度:100%,和上 / 下 / 左 / 右:自动)。

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

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

照本文所述,这在 Firefox,Safari,Chrome,Internet Explorer 8(及更高版本)和 Opera 中都有效,尽管 Internet Explorer 7 和 Internet Explorer 6 需要额外的 CSS 和表达式,IIRC,并且我上次检查时,第二个 CSS 变体确实在 Opera 中不起作用。

注意事项:

  • cont 层内部的浮动元素将不包含在内。您需要确保清除它们或以其他方式包含它们,否则它们会滑出底部。
  • 边距在 panel 元素上,而填充在 cont 元素上。不要使用相反的内容(续上的边距或窗格上的边距),否则您会发现奇怪的地方,例如页面总是比浏览器窗口稍宽。
  • 如前所述,整个事情需要是块或内联块。随意使用<div>而不是<span>来简化 CSS。

更加完整的演示,通过与display: inline-block一起使用,并同时具有auto和 specific width s / min-height s,展示了该技术的灵活性:

.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); }
<p class="pane debug_blue" style="float: left;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>

这是正在广泛使用的技术的现场演示

christmas-card-2009.slippyd.com屏幕截图

最好使用半透明的.png

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

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

当然,除了可爱的Internet Explorer 6之外,它的工作都很酷。有更好的修复程序可用,但是这里有一个快速的技巧:

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

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

演示

输出:

具有伪元素的背景不透明度

相关代码:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

浏览器支持Internet Explorer 8及更高版本。

最简单的方法是使用半透明的背景PNG 图像

如果需要,可以使用 JavaScript 使它在Internet Explorer 6中运行。

我使用Internet Explorer 6中的 “ 透明 PNG” 中概述的方法。

除此之外,您可以使用两个并排的同级元素来伪造它 - 将一个半透明 ,然后将另一个绝对定位在顶部

此方法不仅使您可以在背景中显示纯色图像,还可以使其他属性(如边框)具有透明度。不需要透明的 PNG 图像。

在 CSS 中使用:before (或:after ),并为它们提供不透明度值,以使元素保持其原始不透明度。因此,您可以使用:before 来创建人造元素,并为其提供所需的透明背景(或边框),然后将其移动到要使用z-index保持不透明的内容的后面。

一个示例( 小提琴 )(请注意,类为dadDIV只是为了提供一些与颜色的上下文和对比度,实际上不需要此额外元素,并且将红色矩形向右下移一点以使可见fancyBg元素后面的背景):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

使用此 CSS:

.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 分成两个元素,然后将文本移到框上(例如,负边距)。

否则将无法实现。

就像克里斯提到的那样:如果您使用透明的 PNG 文件,则必须使用 JavaScript 解决方法才能使其在讨厌的 Internet Explorer 中工作。

几乎所有这些答案都假定设计人员想要纯色背景。如果设计师实际上想要照片作为背景,那么目前唯一真正的解决方案是 JavaScript,如其他地方提到的 jQuery Transify 插件。

我们需要做的是加入 CSS 工作组讨论,并使他们为我们提供一个 background-opacity 属性!它应该与多背景功能协同工作。