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

#css #html5 #css3 #svg #шрифты

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

Желаемый эффект:    

    

Вот мой код:    

body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
    display:inline-block;
}
h1:after{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    left:0; top:17px;
    background:#fff;
}    


html

EXAMPLE
    


Как я могу реализовать прозрачное зачеркивание  моего текста, которое  позволяет
в фоновом режиме появляться в этой строке. 

Перевод вопроса: transparent strikethrought on text@Kael
    

Ответы

Ответ 1

body {
  background: url(https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg);
  background-size: cover;
}

h1 {
  font-size: 100px;
  position: relative;
  margin-top: 1.6em;
}

h1 span {
  opacity: 0;
  display: inline-block;
  font-size: inherit;
}

h1:after,
h1:before {
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-text);
  overflow: hidden;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 47%, 0% 47%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 47%, 0% 47%);
}

h1:after {
  content: attr(data-text);
  top: auto;
  bottom: 0;
  -webkit-clip-path: polygon(0% 53%, 100% 53%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 53%, 100% 53%, 100% 100%, 0% 100%);
}
TEXT


Ответ 2

Вы можете достичь прозрачного перечеркивания текста только с помощью CSS с использованием
line-height и overflow:hidden свойств.    

Demo : CSS transparent strike through    

Скриншот примера:    

    

Объяснение :    


Шаг 1 : спрятать нижнюю часть текста тега 
 height:0.52em;
overflow:hidden;   использовать em units так, что высота подстраивается под размер
шрифта  для тега 

fiddle     
Шаг 2 : "rewrite" содержание в псевдо-элемента, чтобы минимизировать
разметки и предотвратить повторение контента. Вы можете использовать
custom данные атрибута  для того, чтобы сохранить все содержимое в
разметке и поэтому не нужно будет редактировать CSS для каждого
заголовка.
fiddle    
Шаг 3 : выровняйте псевдо текстовый элемент в верх, только ту часть,
которая  внизу показана  line-height:0;
fiddle    


код примера:



body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
}
h1 span, h1:after{
    display:inline-block;
    height:0.52em;
    overflow:hidden;
    font-size:5em;
}

h1:after{
    content: attr(data-content);   
    line-height:0;
    position:absolute;
    top:100%; left:0;
}
EXAMPLE




Перевод ответа:transparent strikethrought on text @web-tiki


Ответ 3

Вариант с применением SVG    

Другой подход для этого эффекта является использование SVG с элементом маски.    

Пример  соответствующего кода на codepen    



*{margin:0;padding:0;}
html,body{height:100%;}
body{background: url(https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg)
center bottom; background-size:cover;text-align:center;}
svg{
  text-transform:uppercase;
  color:darkorange;
  background: rgba(0,0,0,0.5);
  margin-top:5vh;
  width:85%;
  padding:0;
}





Перевод ответа: transparent strikethrought on text @web-tiki