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

仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？

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

尝试时：

p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>

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

当前回答

可以使用附加到十六进制值的不透明度值：

background-color: #11ffeeaa;

在本例中，aa是不透明度。不透明度为00表示透明，ff表示纯色。

不透明度是可选的，因此可以一如既往地使用十六进制值：

background-color: #11ffee;

您也可以使用rgba（）的旧方法：

background-color: rgba(117, 190, 218, 0.5);

如果您想确保背景没有其他样式，如图像或渐变，请使用背景速记：

background: #11ffeeaa;

根据Mozilla规范(https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

2020-04-21 13:44:21

其他回答

在Firefox 3和Safari 3中，您可以像Georg Schö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和过滤器在不影响子元素的情况下实现CSS背景透明度。

结果截图证明：

这是在使用以下代码时：

 <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>

2009-05-21 04:07:56

使用半透明PNG或SVG图像或使用CSS：

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

这是一篇来自css3.info、Opacity、RGBA和妥协（2007-06-03）的文章。

注意，一旦底层背景穿透，文本仍然需要与背景形成足够的对比。

2009-04-30 09:52:43

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

将一个容器div和两个子div放在同一级别，一个用于内容，另一个用于背景。使用CSS，自动调整背景大小以适应内容，并使用z索引将背景放在后面。

.容器{位置：相对；}.内容{位置：相对；颜色：白色；z指数：5；}.背景{位置：绝对；顶部：0px；左：0px；宽度：100%；高度：100%；背景色：黑色；z指数：1；/*这三行用于所有浏览器中的透明度*/-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；过滤器：alpha（不透明度=50）；不透明度：.5；}<div class=“container”><div class=“content”>内容如下。<br/>背景应该适合。</div><div class=“background”></div></div>

2010-07-13 20:51:05

背景色：rgba（255，0，0，0.5）；如上所述，简单地说就是最好的答案。即使在2013年，使用CSS3也不简单，因为不同浏览器的支持水平会随着每次迭代而变化。

虽然所有主要浏览器都支持背景色（CSS 3并不陌生）[1]，但alpha透明度可能很棘手，尤其是在版本9之前的Internet Explorer以及版本5.1之前的Safari浏览器上的边框颜色。[2]

使用Compass或SASS这样的工具确实有助于生产和跨平台兼容性。

[1] W3Schools:CSS背景色属性

[2] Norman的博客：浏览器支持清单CSS3（2012年10月）

2013-01-08 20:00:39

不久前，我在Cross Browser Background Transparency With CSS中写到了这一点。

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

2009-04-30 09:52:06

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

推荐文章

最新文章

标签