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

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

Transparent text cut out of background

Сначала я думал о тенях, но я ничего не могу понять...

Изображение - это фон сайта, абсолютный позиционированный тег <img>

+72
источник поделиться
10 ответов

Это возможно с помощью css3, но не поддерживается во всех браузерах

С фоном-клипом: текст; вы можете использовать фон для текста, но вам придется выровнять его с фоном страницы

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>

http://jsfiddle.net/JGPuZ/1/

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

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

$(document).ready(function(){
  var position = $("h1").position(); //Position of the header in the webpage
  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/2/
+38
источник

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

Демо-версия CodePen: Маска текста SVG

transparent text clipping background

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>
+39
источник
другие ответы

Связанные вопросы


Похожие вопросы

Один из способов, который работает в большинстве современных браузеров (кроме края), хотя и с черным фоном, заключается в использовании

background: black;
color: white;
mix-blend-mode: multiply;

в вашем текстовом элементе, а затем поместите туда любой фон. Умножение в основном отображает код цвета 0-255 в 0-1, а затем умножает его на то, что стоит за ним, поэтому черный остается черно-белым, умножается на 1 и эффективно становится прозрачным. http://codepen.io/nic_klaassen/full/adKqWX/

+12
источник

Возможно, но пока только с браузерами на основе Webkit (Chrome, Safari, Rockmelt, все, что основано на проекте Chromium.)

Трюк состоит в том, чтобы иметь элемент в белом, который имеет тот же фон, что и тело, а затем использовать -webkit- background-clip: text; для внутреннего элемента, который в основном означает "не расширять фон за пределами текста" и использовать прозрачный текст.

section
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    width: 100%;
    height: 300px;
}

div
{
    background: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 0);

    width: 60%;
    heighT: 80%;
    margin: 0 auto;
    font-size: 60px;
    text-align: center;
}

p
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    -webkit-background-clip: text;
}
​

http://jsfiddle.net/BWRsA/

+3
источник

Я думаю, вы могли бы достичь чего-то вроде с помощью background-clip, но я еще не тестировал это.

Смотрите этот пример:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Только Webkit, я еще не знаю, как изменить черный фон на белый)

+2
источник

Вы можете использовать myadzel Patternizer плагин jQuery, чтобы добиться этого эффекта в браузерах. В настоящее время нет кросс-браузерного способа сделать это с помощью только CSS.

Вы используете Patternizer, добавив class="background-clip" в HTML-элементы, где вы хотите, чтобы текст был нарисован как шаблон изображения, и укажите изображение в дополнительном атрибуте data-pattern="…". См. Источник демо. Patternizer создаст изображение SVG с заполненным рисунком текстом и подложит его к прозрачно отображаемому HTML-элементу.

Если, как и в изображении примера вопроса, шаблон заполнения текста должен быть частью фонового изображения, выходящего за рамки "узорного" элемента, я вижу два варианта (непроверенный, мой любимый первый):

  • Используйте маскирование вместо фонового изображения в SVG. Как в ответе веб-тики, к которому с помощью Patternizer будет добавляться автоматическое генерация SVG и невидимый элемент HTML сверху, что позволяет выбирать и копировать текст.
  • Или используйте автоматическое выравнивание изображения шаблона. Может быть сделано с кодом JavaScript, аналогичным тому, который указан в ответе Gijs.
+1
источник

Вы можете использовать инвертированный/отрицательный/обратный шрифт и применять его с помощью правила CSS font-face="…". Возможно, вам придется играть с интервалом между буквами, чтобы избежать небольших белых промежутков между буквами.

Если вам не нужен конкретный шрифт, это просто. Загрузите понравившийся, например, из коллекция перевернутых шрифтов.

Если вам нужен конкретный шрифт (скажем, "Open Sans" ), это сложно. Вы должны преобразовать существующий шрифт в инвертированную версию. Это можно сделать вручную с помощью Font Creator, FontForge и т.д., Но, конечно, мы хотим автоматическое решение. Я еще не мог найти инструкции для этого, но некоторые подсказки:

+1
источник

Демо-скриншот

Мне нужно было сделать текст, который выглядел так же, как в оригинальном посте, но я не мог просто подделать его, выстроив фоны, потому что вокруг элемента есть анимация. Кажется, никто этого не предложил, так вот что я сделал: (Пытался сделать так же легко, насколько это возможно.)

var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.

//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;

//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//Relevant Helper Functions:
function centeredDiv(parent) {
    //Container:
    var d = document.createElement('div'), s = d.style;
    s.display = "table"; s.position = "relative"; s.zIndex = 999;
    s.top = s.left = 0; s.width = s.height = "100%";
    //Content Box:
    var k = document.createElement('div'), j = k.style;
    j.display = "table-cell"; j.verticalAlign = "middle";
    j.textAlign = "center"; d.appendChild(k);
    parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
    var d = document.createElement('div');
    if(tCont) d.textContent = tCont;
    parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
    var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
    context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
    return context.measureText(text).width;
}

Просто бросьте это в окне window.onload, установите фон тела на свое изображение и посмотрите, как происходит волшебство!

+1
источник

Невозможно с помощью CSS сейчас боюсь.

Лучше всего просто использовать изображение (возможно, PNG) и разместить на нем хороший текст alt/title.

В качестве альтернативы вы можете использовать SPAN или DIV и иметь изображение в качестве фона для вашего текста, который вы хотите использовать для SEO-целей внутри него, но с текстовым отступом от экрана.

0
источник

просто поставьте этот css

    .banner-sale-1 .title-box .title-overlay {
      font-weight: 900;
      overflow: hidden;
      margin: 0;
      padding-right: 10%;
      padding-left: 10%;
      text-transform: uppercase;
      color: #080404;
      background-color: rgba(255, 255, 255, .85);

      /* that css is the main think (mix-blend-mode: lighten;)*/
      mix-blend-mode: lighten;

    }
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос