Suppose there is any transparent block background:
background-color: rgba(255, 255, 255, 0.75);
And this block displays text with the following property:
color: rgba(255, 255, 255, 0.25);
The site background is set as follows:
body { background-image: url(../images/font1.jpg);}
As a result, the transparency of the text is visible relative to the genitive element.
The site background is not visible with such transparency of the text.
How to implement the transparency of the text to the background of the site in any element?
Those. As a result, a part of the background from the text will be visible.

1 answer 1

Probably that way.

 @import url(http://fonts.googleapis.com/css?family=Oswald:400,700); body { font-family: 'Oswald', sans-serif; color: #fff; background-color: #000; } .wrapper { text-align: center; } .title { font-size: 2em; position: relative; margin: 0 auto 1em; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase; } .title:after { position: absolute; top: 100%; left: 50%; width: 240px; height: 4px; margin-left: -120px; content: ''; background-color: #fff; } /* Clip text element */ .clip-text { font-size: 6em; font-weight: bold; line-height: 1; position: relative; display: inline-block; margin: .25em; padding: .5em .75em; text-align: center; /* Color fallback */ color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clip-text:before, .clip-text:after { position: absolute; content: ''; } /* Background */ .clip-text:before { z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; } /* Text Background (black zone) */ .clip-text:after { position: absolute; z-index: -1; top: .125em; right: .125em; bottom: .125em; left: .125em; background-color: #000; } /* Change the background position to display letter when the black zone isn't here */ .clip-text--no-textzone:before { background-position: -.65em 0; } .clip-text--no-textzone:after { content: none; } /* Use Background-size cover for photo background and no-repeat background */ .clip-text--cover, .clip-text--cover:before { background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } /* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */ .clip-text_one { background-image: url(http://lorempixel.com/480/200/abstract/7); } .clip-text_two { background-image: url(http://lorempixel.com/480/200/abstract); } .clip-text_tree { background-image: url(http://lorempixel.com/480/200/abstract/2); } .clip-text_four { background-image: url(http://lorempixel.com/480/200/abstract/4); } .clip-text_five { background-image: url(http://lorempixel.com/480/200/abstract/5); } .clip-text_six { background-image: url(http://lorempixel.com/480/200/abstract/9); } .clip-text_seven { background-image: url(http://lorempixel.com/480/200/abstract/8); } .clip-text_eight { background-image: url(http://lorempixel.com/410/200/people); } .clip-text_nine { background-image: url(http://lorempixel.com/480/200/nightlife); } .clip-text_ten { background-image: url(http://lorempixel.com/480/200/nightlife/8); } .clip-text_eleven { background-image: url(http://lorempixel.com/480/200/fashion/10/cc); background-size: cover; } .clip-text_twelve { background-image: url(http://lorempixel.com/480/200/people/7/cc); } .clip-text_thirteen { background-image: url(http://lorempixel.com/480/200/food/5/cc); } .clip-text_fourteen { background-image: url(http://lorempixel.com/480/200/city/9/cc); } .clip-text_fifteen { background-image: url(http://lorempixel.com/480/200/nightlife/5); } 
 <div class="wrapper"> <div class="clip-text clip-text_one">Mask</div> <div class="clip-text clip-text_fifteen clip-text--no-textzone">Mask</div> <div class="clip-text clip-text_twelve clip-text--cover">Еще маска</div> <div class="clip-text clip-text_tree clip-text--no-textzone">Mask</div> <div class="clip-text clip-text_two">Mask</div> <div class="clip-text clip-text_fourteen clip-text--cover">Mask</div> <div class="clip-text clip-text_tree">Mask</div> <div class="clip-text clip-text_eleven clip-text--cover">Mask</div> <div class="clip-text clip-text_four">Mask</div> <div class="clip-text clip-text_five">Mask</div> <div class="clip-text clip-text_six">Mask</div> <div class="clip-text clip-text_seven">Mask</div> <div class="clip-text clip-text_eight">Mask</div> <div class="clip-text clip-text_nine">Mask</div> <div class="clip-text clip-text_ten">Mask</div> <div class="clip-text clip-text_thirteen clip-text--cover">Mask</div> </div>

Or so:

 html, body{ background: grey; } p{ margin: 0px; } #clip{ /* Бекграунд добавлять первым */ background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8++Cjwvc3ZnPg==); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 28vw; font-weight: bold; text-align: center; } , #eee, rgba (222,112,6,0.2), # de7006), url (data: image / svg + xml; base64, PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8 ++ Cjwvc3ZnPg ==); html, body{ background: grey; } p{ margin: 0px; } #clip{ /* Бекграунд добавлять первым */ background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8++Cjwvc3ZnPg==); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 28vw; font-weight: bold; text-align: center; } 
 <p id="clip">Другая маска</p>

Gradient.

 .gradient1 { font-size: 96px; margin: 0.5em; opacity: 0.9; display: inline-block; position: relative; color: #000; background: #fff; mix-blend-mode: multiply; } section.light { background: #eee; } .gradient1::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(left,#23966c, #faaa54, #e23b4a, #db0768, #360670); background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; mix-blend-mode: screen; } 
 <section class="light"> <h1 class="gradient1">CSS Gradient Text</h1> </section>