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

【问题标题】：How to create transparent text on non-transparent background如何在非透明背景上创建透明文本
【发布时间】：2017-02-01 03:11:33
【问题描述】：

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

【问题讨论】：

我们可以试试吗？
能否请您显示一些代码或一些示例？
我认为这是http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css的副本
opacity 对你来说可能是一本好书 :)
这可能是一张不透明的图片。

标签： css

【解决方案1】：

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

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);
}

<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>

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

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);
}

<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>

【讨论】：

【解决方案2】：

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

*{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;}

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

使用 Photoshop，您可以减少文本图层的填充栏或增加该图层的透明度。

【讨论】：

【解决方案3】：

使用不透明度；

html:

<body>
    <div class='frontimage'>

    </div>
</body>

css:

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

【讨论】：