有什么方法可以使用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/
用一些JavaScript,你可以自动对齐背景:
$(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>
你们太快了:D
哦,太好了!我将在回家后尽快测试自动对齐!谢谢!:D
您可能需要根据情况更改代码,现在它可能与其他元素发生冲突,并且此元素的编写速度非常快,如果您有任何疑问,我会听到
不要忽略答案,这是一个非常好的解决方案,但是它
background-clip:text
是仅Webkit的非标准选项。CSS3不允许使用text
此属性的值(请参阅参考资料)。此技术使您可以查看文本通常所在的元素的背景。我正在寻找一种方法,以通过文本通常所在的位置查看文本元素下的内容。