0

how can I "cut" a text from an element? So I would see the background through the text?? Sorry, My english skill don't let me express myself correctly.

I made a JSfiddle and it's the best I can do:

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

hdotluna
  • 5,514
  • 4
  • 20
  • 31
Ícaro Brandão
  • 1
  • You are already having that code for WebKit. If you want a cross browser solution (not sure about IE support) have a look at this thread - http://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background – Harry Mar 03 '17 at 01:58
  • jQuery should be loaded first before bootstrap. I already updated your post. – hdotluna Mar 03 '17 at 01:59
  • 1
    @Harry It’s not exactly what the OP needs. The background is just repeated for the text, but it must be completely transparent. – Sebastian Simon Mar 03 '17 at 02:00
  • @Xufox: Oh yeah, you are correct. I get what you are saying. In that case I'm inclined to mark this as a dupe of the thread that I linked in my previous comment. The SVG answer there (with the mask) should do what the OP wants. – Harry Mar 03 '17 at 02:03

0 Answers0