主页 / 问题 / 697436
Accepted
Nikolay
Asked:2020-07-25 16:27:40 +0000 UTC2020-07-25 16:27:40 +0000 UTC

仅在文本上叠加背景

  • 772

有文字。它必须叠加在上面，background以便它只在文本上。也就是说，所有不是文本的东西都是透明的。我正在考虑svg将图像覆盖在文本上，但我不知道如何使所有内容透明，除了字母。难点在于每个字母不能有不同的图片，而是一个整体

css

2 个回答

  1. Best Answer

    svg {
  width: 6em;
  height: 1.5em;
  font: 900 500%/1.2 'Arial Black', sans-serif;
}

text {
  fill: url(#sea);
}
    <svg>
  <defs>
    <pattern id="sea" patternUnits="userSpaceOnUse" width="544" height="340" >
      <image xlink:href="http://i01.i.aliimg.com/wsphoto/v0/32244527293/F0050-24inch-x38-inch-Underwater-World-Coral-Sharks-Turtle-Moray-Eel-Fish-Poster-on-Waterproof-Canvas.jpg" width="544" height="340" />
    </pattern>
  </defs>
  <text y="1.2em">Ваш текст!!!</text>
</svg>

    • 14

  2. 注意跨浏览器兼容的问题。

    * {
  margin: 0;
  padding: 0;
}

div {
  font: 900 normal 450%/100vh sans-serif;
  text-transform: uppercase;
  text-align: center;
  background-image: url("https://isstatic.askoverflow.dev/zN1F6.jpg");
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <div>Lorem ipsum</div>

    • 10

相关问题