Прозрачный текст вырезан из фона

Question

Есть ли способ вырезать прозрачный текст из фонового эффекта, такого как на следующем изображении, с помощью CSS? Было бы грустно потерять все драгоценное SEO из-за того, что изображения заменяют текст.

Сначала я подумал о тенях, но не могу понять, как это сделать ...
Изображение - это фон сайта, тег <img> с абсолютным позиционированием

_{Свободный перевод вопроса Transparent text cut out of background от участника @Love Dager.}

Answer 1

Это возможно сделать с CSS3.

С помощью background-clip: text; вы можете использовать фон для текста, но вам нужно будет выровнять его с фоном страницы

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

Автоматическое выравнивание

С помощью небольшого javascript вы можете автоматически выровнять фон:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/

_{Свободный перевод ответа от участника @Gijs.}

Answer 2

В ближайшем будущем мы можем использовать element() для достижения этой цели.

Функция element () позволяет автору использовать элемент в документе как изображение. По мере изменения внешнего вида элемента, на который указывает ссылка, изменяется и изображение. ^ref

Трюк состоит в том, чтобы создать общий div с текстом, а затем использовать element() в сочетании с маской.

Вот базовый пример, который пока работает только в последней версии Firefox.

#text {
  font-size:35px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  background:red;
  -webkit-mask:
    -moz-element(#text) center/contain no-repeat, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

<div id="text">
You can put your text here
</div>

<div class="main">

</div>

Это даст следующее:

Изображение отзывчивое, поскольку мы полагаемся на основные свойства фона и можем легко обновить текст с помощью базового CSS.

Мы можем рассматривать любой контент, а также создавать паттерны:

#text {
  font-size:30px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  padding:20px;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}
#text span {
  font-family:cursive;
  font-size:35px;
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  background:red;
  -webkit-mask:
    -moz-element(#text) 0 0/20% auto, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

<div id="text">
Your <span>text</span> here ?
</div>

<div class="main">

</div>

И почему бы не какую-нибудь анимацию для создания бесконечной прокрутки текста:

#text {
  font-size:30px;
  font-weight:bold;
  color:#000;
  font-family:sans-serif;
  text-transform: uppercase;
  white-space:nowrap;
  padding:20px 5px;
  /* we hide it */ 
  position:fixed;
  right:200vw;
  bottom:200vh
}


body {
  background:url(https://picsum.photos/id/1018/800/800) center/cover; 
}

.main {
  margin:50px;
  height:100px;
  padding-right:calc(50% - 50px);
  background:red;
  -webkit-mask:
    -moz-element(#text) 0 50%/200% auto content-box, /* this behave like a background-image*/
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:m 5s linear infinite;
}

@keyframes m{
  to {-webkit-mask-position:200% 50%}
}

<div id="text">
Srolling repeating text here 
</div>

<div class="main">

</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Примечание переводчика:

Все примеры работают только в последней версии FF.
Но скоро заработают и в Chrome

Answer 3

Хотя это возможно с помощью CSS, лучшим подходом было бы использование встроенного SVG с маскированием SVG. Этот подход имеет некоторые преимущества перед CSS:

Намного лучшая поддержка браузеров: IE10 +, Chrome, Firefox, Safari ...

Это не влияет на SEO, поскольку пауки могут сканировать контент SVG (Google индексирует контент SVG с 2010 года).

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

<svg viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

Если вы хотите сделать текст доступным для выделения и поиска, вам необходимо включить его вне тега <defs>. В следующем примере показан способ сделать это, сохранив прозрачный текст с помощью тега <use>:

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>

_{Свободный перевод ответа от участника @web-tiki.}

БЛОГ НА HUSL

Прозрачный текст вырезан из фона

Ответы (3 шт):

Автоматическое выравнивание