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

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

尝试时:

p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>

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


当前回答

这里有一个jQuery插件Transify(Transify-一个jQueryplugin,可以轻松地将透明度/不透明度应用于元素的背景),它可以为您处理所有事情。

我时不时地遇到这个问题,所以我决定写一些能让生活更轻松的东西。该脚本小于2KB,只需要一行代码就可以运行,如果您愿意,它还可以处理背景的不透明度动画。

其他回答

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

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;

几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是JavaScript,就像其他地方提到的jQueryTransify插件一样。

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

我是这样做的(这可能不是最佳的,但它有效):

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

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

例如

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

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

问题是,在您的示例中,文本实际上是完全不透明的。它在p标记内具有完全不透明性,但p标记只是半透明的。

您可以添加半透明的PNG背景图像,而不是在CSS中实现,或者将文本和div分离为两个元素,并将文本移动到框上(例如,负边距)。

否则就不可能了。

正如Chris所提到的:如果你使用一个具有透明度的PNG文件,你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。