배경에서 잘라낸 투명한 텍스트


92

CSS를 사용하여 다음 이미지와 같은 배경 효과 에서 투명한 텍스트를 잘라내 는 방법이 있습니까?
이미지가 텍스트를 대체하기 때문에 귀중한 SEO를 모두 잃는 것은 슬픈 일입니다.

배경에서 잘라낸 투명한 텍스트

처음에는 그림자를 생각했는데 아무것도 알아낼 수가 없어 ...

이미지는 사이트 배경, 절대 위치 <img>태그입니다.


"텍스트를 대체하는 이미지 때문에 소중한 SEO를 모두 잃어 버립니다." 여전히 매우 친숙한 기존 이미지 대체 기술도 있습니다. BTW : 실제로 편지 뒤에있는 배경도 투명하게 유지해야합니다. 이것이 여기서 문제입니다…
feeela

네, 가능하다면 이것은 좋은 연습이 될 것입니다 ...
Jessica Lingmn

<h1><img alt="Some Text" /></h1>.NET보다 SEO가 덜 친화적 인 이유를 알 수 없습니다 <h1>Some Text</h1>. 전통적으로 이미지의 문제는 지원 마크 업없이 페이지에 방금 덤프되었다는 것입니다.
cimmanon

@cimmanon 네, 맞아요. SEO 포인트를 잃지 않고 이미지를 사용할 수 있지만 여전히 텍스트를 선택할 수 없으며 페이지에서 검색하고 링크가 더 복잡해지며 텍스트를 업데이트하는 데 더 많은 작업이 필요할 것입니다 ... : /
Love Dager

2
아시다시피, Google은 CSS 이미지 대체 기술로 완전히 멋집니다. mezzoblue.com/archives/2008/05/05/image_replac
cimmanon

답변:


47

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/


자동 정렬

약간의 자바 스크립트로 배경을 자동으로 정렬 할 수 있습니다.

$(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/1336/


A you people are too fast : D
Gijs

오 좋은! 집에 도착하자마자 자동 정렬을 테스트하겠습니다! 감사합니다! : D
사랑 Dager

상황에 따라 코드를 약간 변경해야합니다. 이제 다른 요소와 충돌 할 수 있습니다.이 문제는 정말 빠르게 작성되었습니다. 질문이 있으면들을 수 있습니다
Gijs

3
대답을 무시하지 마십시오. 정말 좋은 솔루션이지만 background-clip:textWebkit 전용, 비표준 옵션입니다. CSS3는 text이 속성에 대한 값을 허용하지 않습니다 ( 참조 ).
tanius

1
이 기술을 사용하면 일반적으로 텍스트가있는 요소의 배경을 볼 수 있습니다. 텍스트가 일반적으로있는 곳을 통해 텍스트가있는 요소 아래에 무엇이 있는지 확인하는 방법을 찾고 있습니다.
Vince

49

CSS로 가능하지만 더 나은 방법은 SVG 마스킹 과 함께 인라인 SVG 를 사용하는 것 입니다. 이 접근 방식은 CSS보다 몇 가지 장점이 있습니다.

CodePen 데모 : SVG 텍스트 마스크

투명 텍스트 클리핑 배경

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>


2
이것은 오늘날 크로스 브라우저에서 작동하는 유일한 솔루션 인 것으로 보입니다 : IE11, FF, Chrome, Safari. 그리고 웹의 모든 문제에 대해 제공되는 다른 많은 솔루션처럼 배경으로 이미지가 필요하지 않습니다.
Timo Kähkönen 2015

1
이 답변에서 영감을 받아 흰색 둥근 사각형의 투명한 SVG 텍스트가 회전하는 키 프레임 애니메이션을 만들었습니다. 배경에는 텍스트와 이미지가 있습니다. 가서보세요 : jsbin.com/nipuqu/3 (세계 챔피언십이 다가옵니다 :))
Timo Kähkönen 2015

2
좋은 해결책이지만 "텍스트 선택 및 페이지 검색"이 OP의 요구 사항에있는 것 같으 <text>므로 <defs>부품 외부 를 포함 할 수 있습니다 . (btw SE 크롤러가 defs에서 SVG 콘텐츠를 처리하는 방법을 잘 모르겠습니다.) 여기에 끔찍한 FF 버그로, 영업 이익은 원하는 것을 유지하는 방법은 악용입니다 : jsfiddle.net/tfneqxxb
Kaiido

텍스트가 동적이면 어떻게됩니까? 너비를 자동 조정하지 않습니다.
Imran Bughio

1
@ImranBughio 아니 그렇지 않습니다. SVG 텍스트는 일반 HTML 텍스트처럼 작동하지 않습니다. 당신은 그것을 배치 할 필요가 있습니다. 자세한 정보는 여기를
web-tiki 2011

16

대부분의 최신 브라우저 (예 : edge 제외)에서 작동하는 한 가지 방법은 검은 색 배경으로 만 사용되지만

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

텍스트 요소에 넣고 원하는 배경을 그 뒤에 넣으십시오. 곱하기는 기본적으로 0-255 색상 코드를 0-1에 매핑 한 다음 그 뒤에있는 값을 곱하므로 검정은 흑백으로 유지되고 흰색은 1을 곱하고 효과적으로 투명 해집니다. http://codepen.io/nic_klaassen/full/adKqWX/


3
블랙 컬러 사용과 흰색 배경에 대한 color-dodge, lighten또는 screenmix-blend-mode
이므 란 Bughio

3

그것은 이다 가능하지만, 지금까지 유일한 웹킷 기반 브라우저 (크롬 프로젝트를 기반으로 크롬, 사파리, 멜트, 아무것도.)

비결은 본문과 배경이 같은 흰색 -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/


멋진 트릭! 하지만 이제 모든 것을 제대로 정렬하려면
개년

네, 그것의 또 다른 문제입니다. 아직 개발 중이며 곧 이와 같은 내용을 볼 수 있기를 진심으로 바랍니다! :)
Kyle

또한 이미지의 투명한 텍스트 위에 항상 레이어를 두어 계속 선택할 수 있습니다. 그러나 나는 그것이 SEO에 나쁜 관행이라고 확신한다 .. 숨겨진 메시지 / 키워드 등등.
Kyle

Webkit 브라우저에서는 매우 멋지게 보이지만 다른 모든 사람들에게는 잔디 위에 반투명 한 흰색 상자입니다.
cimmanon

1
아, 얘들 아 ... 네, 제작에 사용할 계획입니다. 그러나 물론 폴백 없이는 아닙니다! @cimmanon
Love Dager dec.

2

사용하여background-clip 이와 같은 것을 얻을 수 있다고 생각 하지만 아직 테스트하지 않았습니다.

다음 예를 참조하십시오.
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html(Webkit
만 해당, 검정색 배경을 흰색 배경으로 변경하는 방법을 아직 모릅니다)


예, 작동 할 수 있습니다! 감사합니다, 이제 모든 것을 올바르게 정렬합니다 .. 젠장 .. -.-
Love Dager

2

나는 엉망이 된 동안 이것을하는 새로운 방법을 발견했습니다. 어떻게 작동하는지 완전히 모르겠습니다 (다른 사람이 설명하고 싶다면하십시오).

매우 잘 작동하는 것 같고 이중 배경이나 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>


1

반전 / 네거티브 / 리버스 글꼴 을 사용하고font-face="…" CSS 규칙 . 글자 사이의 작은 흰색 간격을 피하기 위해 글자 간격을 사용해야 할 수도 있습니다.

특정 글꼴이 필요하지 않으면 간단합니다. 예를 들어이 반전 된 글꼴 모음 에서 좋아할만한 글꼴을 다운로드하십시오 .

특정 글꼴 (예 : "Open Sans")이 필요한 경우 어렵습니다. 기존 글꼴을 반전 된 버전으로 변환해야합니다. 이것은 Font Creator, FontForge 등을 사용하여 수동으로 가능하지만 물론 자동화 된 솔루션을 원합니다. 아직 지침을 찾을 수 없지만 몇 가지 힌트 :


1

myadzel의 Patternizer jQuery 플러그인사용 하여 브라우저에서이 효과를 얻을 수 있습니다 . 현재로서는 CSS만으로이를 수행하는 브라우저 간 방법이 없습니다.

class="background-clip"텍스트를 이미지 패턴으로 칠할 HTML 요소 를 추가 하여 Patternizer를 사용 하고 추가 data-pattern="…"속성에 이미지를 지정 합니다. 데모 소스를 참조하십시오 . Patternizer는 패턴이 채워진 텍스트로 SVG 이미지를 만들고 투명하게 렌더링 된 HTML 요소에 밑에 놓습니다.

질문의 예제 이미지에서와 같이 텍스트 채우기 패턴이 "패턴 화 된"요소를 넘어 확장되는 배경 이미지의 일부 여야하는 경우 두 가지 옵션이 표시됩니다.

  • SVG에서 배경 이미지 대신 마스킹을 사용하십시오. 마찬가지로 웹 티키의 대답은 여전히 SVG의 자동 생성 및 텍스트 선택 및 복사를 할 수 있습니다 상단에 눈에 보이지 않는 HTML 요소를 추가합니다 Patternizer을 사용하는 것이다.
  • 또는 패턴 이미지의 자동 정렬을 사용합니다. Gijs의 답변 과 유사한 JavaScript 코드로 수행 할 수 있습니다 .

1

그냥 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;

    }

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에 그것을 던져서 몸의 배경을 당신의 이미지로 설정하고 마술이 일어나는 것을 지켜보십시오!


0

지금 CSS로는 불가능합니다.

가장 좋은 방법은 이미지 (아마도 PNG)를 사용하고 그 위에 좋은 대체 / 제목 텍스트를 배치하는 것입니다.

또는 SPAN 또는 DIV를 사용하고 그 안에 SEO 목적으로 원하는 텍스트와 함께 이미지를 배경으로 사용할 수 있지만 화면 밖으로 텍스트 들여 쓰기를 할 수 있습니다.


그래, 당신 말이 맞아. SEO 포인트를 잃지 않고 이미지를 사용할 수 있지만 여전히 텍스트를 선택할 수 없으며 페이지에서 검색하고 링크가 더 복잡해지며 텍스트를 업데이트하는 데 더 많은 작업이 필요할 것입니다 ... : /
Love Dager

0

mix-blend-mode 그런 효과의 가능성도 있습니다.

mix-blend-modeCSS 속성 세트는 요소의 내용은 요소의 부모의 내용과 요소의 배경으로 혼합하는 방법.

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.