Мне было интересно, можно ли получить прозрачный текст внутри контейнера с сплошным цветом фона. Прозрачный текст позволяет вам видеть изображение за контейнером.Прозрачный текст позволяет фон показать
Что-то вроде этого
Нашел с поиском Google. Изображение было создано в Photoshop. Можно ли добиться этого эффекта с помощью CSS? Если да, то как?
Просто интересно.
Я надеюсь, что это будет то, что вы ищете
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat;
margin: 10px;
}
h1 {
background-color: #fff;
overflow: hidden;
display: inline-block;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 200px;
}
span {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
}
.Container {
text-align: center;
}
</style>
</head>
<body>
<div class="Container">
<h1><span>LOS ANGELES</span></h1>
</div>
</body>
</html>Все, что вы просто хотите сделать, это установка -webkit-text-fill-color или color к transparent и -webkit-background-clip к text. Simple :)
Другой подход заключается в использовании clip-path и с использованием изображения SVG в качестве маски - изображение SVG может содержать текст. Это имеет поддержку в WebKit и Gecko, но не IE (http://caniuse.com/#feat=css-masks)