Question

我有照片，在她的一个范围内。

我的跨度背景颜色为白色，我想将文字设置为透明。

像这样： http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG

我试过了：

Background-color:white;
color:transparent;

但不行。

HTML：

<div class="col-md-12 picturebee no-padding">
        <img class="beepic" src="img/img7.jpg" alt="Picture bee">
        <span class="text">Lorem ipsum dolor!</span>
    </div>

CSS

.picturebee{
    margin-top:50px;
    position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
       left: 35%;
  transform: translateX(-26%);
  text-shadow: 1.4px 1.4px #222;

}

Answer 1

试试这个css：

.picturebee{
    margin-top:50px;
    position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
background-color:white;
font-family: 'Cuprum', sans-serif;
       left: 35%;
  transform: translateX(-26%);
  text-shadow: 1.4px 1.4px #222;

}
.text{opacity: 0.5;}

Answer 2

您可以尝试

不透明度：0.0;礼

正确的代码：

  .picturebee{
            margin-top:50px;
            position: relative;
        }
        .picturebee span{
        position: absolute;
        top:30px;
        font-size:53px;
        color:white;
        font-family: 'Cuprum', sans-serif;
               left: 35%;
          transform: translateX(-26%);
          text-shadow: 1.4px 1.4px #222;
          opacity: 0.0;

        }

Answer 3

只需将文字颜色设置为透明即可生效！

说明：如果您使用background: white;和color: transparent;，则会在白色背景上显示透明文字。您不会“擦除”background: white;。

要解决您的问题，您可以添加第二个span并使用background-clip: text;（但此仅适用于 webkit ）

如需更多浏览器支持，您可以查看此网站：perlmod

.picturebee {
  margin-top: 50px;
  position: relative;
  height: 160px;
  width: 588px;
  background: url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
}
.picturebee span.box {
  background: white;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 500px;
  height: 60px;
}
.picturebee span.text {
  position: absolute;
  top: 20px;
  background: -30px -20px url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
  font-size: 53px;
  color: transparent;
  -webkit-background-clip: text;
  font-family: 'Cuprum', sans-serif;
  left: 30px;
  word-wrap: no-break;
}

<div class="col-md-12 picturebee no-padding">
  <span class="box"></span>
  <span class="text">Lorem ipsum dolor!</span>
</div>

此外，您可以将图片设置为背景，而不是将其添加为img

Answer 4

如果是图像：

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

来源：http://www.w3schools.com/css/css_image_transparency.asp

为什么我不能为文本设置透明颜色

4 个答案: