logo标签列表

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

css
3
想象一下：给“body”分配了一个背景，白色的“div”里面有一段文本。我们想让这段文本透过看到背景，该如何用CSS实现呢？像这样：enter image description here
2
我们可以看看你的尝试吗？ - Zay Lau
1
你能展示一些代码或者例子吗？ - aavrug
我认为这是一个重复的问题，你可以在https://dev59.com/QGgv5IYBdhLWcg3wHdN_找到答案。 - Corporalis
不透明度可能对你有所帮助 :) - Roy123
1
那可能是一个带有不透明度的图像。 - Sergio Tx
网页浏览器上的文本始终是独立的“事物”。它不是其容器的一部分，当在CSS中设置为color: transparent或opacity: 0时，它不会“切出”其容器。因此，如果颜色设置为透明或不透明度设置为0，则文本将始终显示为不可见。想象一下，网页元素都是“实体”元素--通过将颜色设置为透明，您基本上是使用透明塑料创建文本，将透明塑料放在纸板上面并不能让您看到纸板后面的内容。 - maxandcoffee
3个回答
4
你可以使用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>

0
使用 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，您可以减少文本图层的填充栏或增加该图层的透明度。 在此输入图片描述

0

使用不透明度；

HTML：

<body>
    <div class='frontimage'>

    </div>
</body>

CSS：

body{
    background-image: url("yourimage.jpg");
}
.frontimage{
    background-image: url("yourotherimage.jpg");
    opacity: 0.5;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接