透明文本切出背景 [英] Transparent text cut out of background

问题描述

有什么方法可以使用CSS来创建透明文本切出背景效果的效果，如下图所示？

这将是令人遗憾的失去所有因为图片替换了文字，所以非常珍贵SEO。

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all precious SEO because of images replacing text.

我第一次想到阴影，但我不能算出任何东西...

I first thought of shadows but I can't figure anything out...

图片是网站背景，绝对定位< img> 标签

The image is the site background, an absolute positioned <img> tag

推荐答案

有可能与css3，但它不支持所有浏览器

It's possible with css3 but it's not supported in all browsers

有background-clip：text;您可以对文本使用背景，但必须将其与页面背景对齐

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

样式：

body {
  background: url(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.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(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.jpg) -20px -20px repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display:block;
}

html

<h1><span>ABCDEFGHIKJ</span></h1>​

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

自动对齐

使用一些javascript可以自动对齐背景：

with a little javascript you can align the background automatic:

$(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"); 
});

http://jsfiddle.net/JGPuZ/2/

这篇关于透明文本切出背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！