Question

想象一下：有一个背景分配给“body”和一个白色的“div”，里面有一个文本。这个文本是这样我们可以通过它看到背景。如何用CSS实现？像这样：

Answer 1

您可以使用 SVG 创建mask，其中rect元素用于白色背景，text元素用于透明文本部分。

＆＃13;

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
  background-size: cover;
  height: 100vh;
  background-position: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 300px;
  height: 100px;
}
svg text {
  text-anchor: middle;
}
svg #overlay {
  fill: white;
  opacity: 0.7;
}
svg #text {
  font-size: 40px;
  font-weight: bold;
}

svg #r {
  fill: white;
  mask: url(#mask);
}

＆＃13;

<svg>
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect id="overlay" x="0" y="0" width="100%" height="100%" />
      <text id="text" x="50%" y="0" dy="65px">Some text</text>
    </mask>
  </defs>
  <rect id="r" x="0" y="0" width="100%" height="100%" />
</svg>

＆＃13;

更新：要使用透明文字创建完整元素大小覆盖，您可以在父元素上使用position: relative，在svg上使用position: absolute并设置mask高度和宽度到100%。要使text居中，您可以dy: 50%使用alignment-baseline: middle;和text-anchor: middle;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.element {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
  background-size: cover;
  height: 100vh;
  background-position: center;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

section {
  height: 100vh;
  background: lightgreen;
}

svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

svg text {
  text-anchor: middle;
  alignment-baseline: middle;
  font-size: 40px;
  font-weight: bold;
}

svg #overlay {
  fill: white;
  opacity: 0.7;
}

svg #r {
  fill: white;
  mask: url(#mask);
}

＆＃13;

<div class="element">
  <svg>
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%">
        <rect id="overlay" x="0" y="0" width="100%" height="100%" />
        <text  id="text" x="50%" y="0" dy="50%">Some text here</text>
      </mask>
    </defs>
    <rect id="r" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

<section></section>

＆＃13;

Answer 2

使用不透明度;

HTML：

<body>
    <div class='frontimage'>

    </div>
</body>

的CSS：

body{
    background-image: url("yourimage.jpg");
}
.frontimage{
    background-image: url("yourotherimage.jpg");
    opacity: 0.5;
}

Answer 3

用css你可以使用不透明度：0.6; （0 =完全透明 - 1 =完全可见）。

＆＃13;

*{font-family:Helvetica, Arial, Sans-Serif;}
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);}
.text{font-size: 5em; font-weight:bold; opacity:0.6;}

＆＃13;

<div class="background">
 <span class="text">
   Lorem ipsum 
 </span>
</div>

＆＃13;

使用photoshop，您可以减少文本图层的填充条或增加此图层的透明度。

如何在非透明背景上创建透明文本

3 个答案: