主页 / 问题 / 663012
Accepted
user245150
Asked:2020-05-07 19:38:56 +0000 UTC2020-05-07 19:38:56 +0000 UTC

如何制作透明文字？

  • 772

我需要一个按钮，其中的文本就像一个背景（即“漏块”）

在此处输入图像描述

html

3 个回答

  1. div#wrapper {
  position: relative;
  height: 500px;
  background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg);
}

div#button {
  background: white;      
  position: absolute;
  top: 160px;
  left: 73px;
  text-align: center;
  padding: 15px;
  font-size: 72px;
}

div#button span { 
     background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) -73px -160px no-repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}
    <div id="wrapper">

  <div id="button">
    <span>КНОПКА</span>
  </div>
</div>

    我注意到这里有两种背景：一种是主背景，另一种是按钮文本。

    重要的是background将与按钮所在的文本放在相同的背景上，并将其移动按钮相对于主背景移动的像素数

    至于浏览器支持，我不能告诉你支持哪些版本。最新的 Chrome/FF/Edge - 绝对有效

    因此，在我看来，暂时用 SVG 来描绘它更好。

    • 18
  2. Best Answer

    两个带有透明文本的 SVG 按钮。

    当您将鼠标悬停在左侧的彩色条上时，动画开始。按钮的透明文本是使用 SVG 蒙版实现的。 

    body {
  background-image: url(https://isstatic.askoverflow.dev/AZ8Hg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: verdana, sans-serif;
}
    <div id="container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" viewBox="0 0 800 800">
    <defs>
      <mask id="hole">
        <rect x="0" y="0" width="400" height="200" fill="white"/>
        <text x="57" y="110" font-size="40"  fill="black"> Button- </text> 
      </mask> 
      <mask id="hole1">
        <rect x="0" y="250" width="400" height="200" fill="white"/>
        <text x="57" y="310" font-size="40" fill="black"> Button+ </text> 
      </mask>	  
    </defs>
    <rect id="green" x="-175" y="50" rx="25" ry="25" width="200" height="100" fill="yellowgreen" mask="url(#hole)">
      <animate attributeName="x" from="-175" to="25" begin="green.mouseover" dur="1.5s" restart="whenNotActive" fill="freeze"/>
    </rect> 
    <rect id="dodger" x="-175" y="250" rx="25" ry="25" width="200" height="100" fill="dodgerblue" mask="url(#hole1)">
      <animate attributeName="x" from="-175" to="25" begin="dodger.mouseover" dur="1.5s" restart="whenNotActive" fill="freeze"/>
    </rect>
  </svg>
</div>

    • 12

  3. 另一种选择，但浏览器支持存在问题。
    mix-blend-mode目前在 ie/edge 中不工作，部分在 Safari 中不工作

    h1{
    background:  black;
    color: white;
    mix-blend-mode: multiply;
}

    • 4

相关问题