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

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

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

尝试时：

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

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

当前回答

在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

其他回答

我认为这将为您提供所需的输出：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

2021-11-29 07:16:44

这是我能想到的最好的解决方案，不使用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

我是这样做的（这可能不是最佳的，但它有效）：

创建要半透明的div。给它一个类/id。将其留空，然后将其关闭。为其设置高度和宽度（例如，300像素乘300像素）。给它一个0.5的不透明度或任何你喜欢的颜色，以及一个背景色。

然后，在该div的正下方，创建另一个具有不同类/id的div。在其中创建一个段落，在其中放置文本。给出div位置：relative，top：-295px（即负295像素）。给它一个z索引为2，以便于度量，并确保它的不透明度为1。根据您的喜好设置段落的样式，但要确保尺寸小于第一个div的尺寸，这样它就不会溢出。

就是这样。代码如下：

.反式{不透明度：0.5；高度：300px；宽度：300px；背景色：橙色；}.变速器2{不透明度：1；位置：相对；顶部：-295px；}.变速器2 p{宽度：295px；颜色：黑色；字号：粗体；}<body><div class=“trans”></div><div class=“trans2”><p>文本文本文本</p></div></body>

这在Safari2.x中有效，但我不了解Internet Explorer。

2009-08-04 22:07:55

我通常在工作中使用这门课。很好。

.透明{过滤器：alpha（不透明度=50）；/*Internet Explorer*/-khtml不透明度：0.5；/*KHTML和旧Safari*/-moz不透明度：0.5；/*Firefox和Netscape*/不透明度：0.5；/*Firefox、Safari和Opera*/}

2017-02-11 08:00:03

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

2009-04-30 09:13:16

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

推荐文章

最新文章

标签