Question

我正在努力实现让我的文字固定，没有任何显示通过的效果，但是持有文本的元素的背景颜色，具有不透明度（例如o.5）。
我目前正在使用另一个元素。
我想知道是否有办法只用一个元素来做。

<div class="body">
   here be a background image

   <div class="title"> TITLE WITH FAINT WHITE BACKGROUND</div>
</div>

Answer 1

您可以使用rgba来定义支持alpha的颜色。

.title{
    color:black;
    background-color:rgba(255,255,255,0.5);
}

支持此功能：http://caniuse.com/#search=rgba

完整样本

＆＃13;

.body{
  height:200px;
  width:100%;
  background:url('http://lorempixel.com/500/200/abstract/1');
}
.title{
   color:black;
   background-color:rgba(255,255,255,0.5);
 }

＆＃13;

<div class="body">
   <div class="title">TITLE WITH FAINT WHITE BACKGROUND</div>
</div>

＆＃13;

Answer 2

要在单个元素中实现此目的，您需要将rgba颜色设置为第一个图像，以便它将在上面呈现。

这使得无法将其设置为颜色，您需要一个图像。

实现这一目标的2个可能性是image（）和线性渐变：

.test {
    background-image: image(rgba(0,0,255,.5)), url("http://placekitten.com/800/600");
}

.test {
    background-image: linear-gradient(0deg, rgba(255,255,255,.5), rgba(255,255,255,.5)), url("http://placekitten.com/1000/800");
  
}

<div class="test">TEST</div>

但是，第一个是有效的CSS作为规范，但据我所知，任何浏览器都不支持

w3c reference

有没有一种简单的方法可以使文本固定，背景透明

2 个答案: