首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用CSS为文本或图像提供透明背景?

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

Stack Overflow用户
提问于 2009-04-30 09:00:02
回答 18查看 1.6M关注 0票数 2.4K

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

我希望在不将文本和背景作为两个单独的元素的情况下实现这一点。

尝试时:

代码语言:javascript
复制
p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
代码语言:javascript
复制
<p>
  <span>Hello world</span>
</p>

看起来子元素受制于其父元素的不透明度,因此opacity:1是相对于父元素的opacity:0.6的。

EN

回答 18

Stack Overflow用户

发布于 2010-07-14 04:51:05

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

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

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

票数 115
EN

Stack Overflow用户

发布于 2012-01-14 08:14:59

此方法允许您在背景中具有图像,而不仅仅是纯色,并且可以用于在其他属性上具有透明度,例如边框。不需要透明的PNG图像。

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

一个示例(fiddle) (请注意,带有dad类的DIV只是为了提供一些上下文和颜色的对比度,实际上并不需要这个额外的元素,红色矩形向下和向右移动了一点,以使fancyBg元素后面的背景可见):

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.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之后(使用零值或任何更适合您需要的值)。

票数 21
EN

Stack Overflow用户

发布于 2011-01-27 00:36:17

几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景,目前唯一真正的解决方案是JavaScript,就像jQuery转换插件mentioned elsewhere一样。

我们需要做的是加入CSS工作组的讨论,让他们给我们一个背景-不透明属性!它应该与多背景功能协同工作。

票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/806000

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档