Question

如何从元素中“剪切”文本？所以我会通过文本看到背景？对不起，我的英语技能不允许我正确表达自己。

我做了一个JSfiddle，这是我能做的最好的事情：

.container-fluid {
  background: linear-gradient(to top right, #1abc9c, #3498db);
  background-color: #000;
  height: 100vh;
  width:100%;
}
h1{
  border-radius : 18px;
  font-size: 60px;
  background-color: #FFF;
  text-align: center;
}
span{
  background: linear-gradient(to top right, #1abc9c, #3498db);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

<body>
  <div id="demo" class="container-fluid">
  <br>
    <h1><span id="span">LULU</span></h1>
  </div>  
</body>

https://jsfiddle.net/icarobrandao/ewuffh9a/59/

我想从一个元素“剪切”文本

0 个答案: