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

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

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

尝试时：

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

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

当前回答

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

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

其他回答

CSS 3为您的问题提供了一个简单的解决方案。使用：

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

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

2013-05-20 23:36:50

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

如果需要，可以使用JavaScript使其在InternetExplorer6中工作。

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

除此之外，您可以使用两个并排的兄弟元素来伪装它-使一个半透明，然后将另一个绝对放置在顶部。

2009-04-30 09:11:16

该方法允许您在背景中显示图像，而不仅仅是纯色，还可以用于在其他属性（如边界）上显示透明度。不需要透明PNG图像。

在CSS中使用：before（或：after），并赋予它们不透明度值，使元素保持其原始不透明度。因此，您可以使用：before来创建一个人造元素，并为其提供所需的透明背景（或边框），然后将其移动到您希望使用z索引保持不透明的内容后面。

一个例子（fiddle）（注意，带有类dad的DIV只是为了提供一些上下文和与颜色的对比，实际上不需要这个额外的元素，红色矩形向下移动一点并向右移动，以便在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财产（本例中为红色背景，但可以是图像或边框）。它被定位为绝对的，以便将其移到.faceyBg后面（使用零值或更适合您需要的任何值）。

2012-01-14 00:14:59

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

DEMO

输出：

相关代码：

p型{位置：相对；}p：之后{内容：“”；位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#fff；-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；不透明度：.6；z指数：-1；}/***以下仅适用于演示样式***/正文{背景：url（'http://i.imgur.com/k8BtMvj.jpg'）不重复；背景尺寸：封面；}p型{宽度：50%；填充：1em；保证金：10%自动；字体系列：arial，serif；颜色：#000；}国际货币基金组织{显示：块；最大宽度：90%；边距：.6em自动；}<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。不要用舌头骚扰。<img src=“http://i.imgur.com/hPLqUtN.jpg“alt=”“/></p>

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

伪元素不透明度

2014-10-05 08:15:14

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

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

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

推荐文章

最新文章

标签