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

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

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

尝试时：

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

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

当前回答

您可以通过（ab）使用渐变语法为Internet Explorer 8解决此问题。颜色格式为ARGB。如果使用Sass预处理器，可以使用内置函数“ie-hex-str（）”转换颜色。

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

2013-12-06 14:40:49

其他回答

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

创建要半透明的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

在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

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

例如

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

//值越小，透明度越高，或者值越低，透明度越低。

2016-06-03 12:09:42

我同意以上所有的答案，rgba是正确的选择。在我的例子中，我以编程方式提供了一个十六进制背景，因此我必须基于十六进制代码生成自己的rgba。我创建了唐先生答案的修改版本，将十六进制转换为rgba

function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }

2021-10-27 21:03:47

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

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为文本或图像提供透明背景？

推荐文章

最新文章

标签