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

Program / 글쓴이

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

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

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

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

답변

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/

답변

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>

스 니펫 확장

답변

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

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

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

답변

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

비결은 본문과 배경이 같은 흰색 -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 이와 같은 것을 얻을 수 있다고 생각 하지만 아직 테스트하지 않았습니다.

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

답변

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

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

스 니펫 확장

답변

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

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

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