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


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

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

изображение является фоном сайта, абсолютная позиция <img> tag

11 75

11 ответов:

это возможно с 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/1337/

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

С небольшим 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/1336/

хотя это возможно с CSS, лучшим подходом было бы использовать inline 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>

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

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

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

Это - это возможно, но пока только с браузерами на основе 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/

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

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

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

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

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

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

вы используете шаблон, добавив class="background-clip" к элементам HTML, где вы хотите, чтобы текст был нарисован как шаблон изображения, и укажите изображение в дополнительном

Demo Screenshot

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

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;
}

просто выбросить в окно.onload, установите фон тела на свое изображение и наблюдайте, как происходит волшебство!

не возможно с CSS только сейчас я боюсь.

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

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

просто поставьте этот 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;

    }

Я только что обнаружил новый способ сделать это во время возни, я не совсем уверен, как это работает ( если кто-то еще хочет объяснить, пожалуйста, сделайте ).

это, кажется, работает очень хорошо, и не требует двойного фона или JavaScript.

вот код: JSFIDDLE

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}
<div></div>