如何在像背景这样的文本下显示图像? [英] How to display image under text like as a background?
问题描述
我想在文本"下显示图像".我已经用Photoshop做到了,但这是一张图片.因此,每次更改文本时,我都必须在Photoshop中进行更改.我想使用jQuery或CSS3或任何其他网络技术来实现相同的目的.
我想要与此类似,但是不想每次文本更改时都创建新图像
使用webkit-background-clip的解决方案-请注意,目前暂时无法在Firefox中使用
从此处重写 HTML/CSS:查看背景"文字?
实时演示 >
h1, p { margin: 0; }
#container {
padding: 20px 20px 100px;
margin: 50px;
position: relative;
}
#container h1 {
/* has same bg as #container */
background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);
font-size: 12em;
font-family: impact;
left: 0;
line-height: 100%;
padding-top: 25px; /* padding + border of div */
position: absolute; /* position at top left of #containter to sync bg */
text-align: center;
top: 0;
width: 100%;
text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-text-fill-color: transparent;
-moz-background-clip: text;
}
I want to display Image under Text. I have done this with Photoshop but it's a Image. So every time text change I have to do changes in Photoshop. I want to achieve same using jQuery or CSS3 or any other web technique.
I want similar to this but NOT by creating new images each time my text changes
Solution using webkit-background-clip - please note that for now this does not work in Firefox
Rewrite from here HTML/CSS: "See Through Background" Text?
h1, p { margin: 0; }
#container {
padding: 20px 20px 100px;
margin: 50px;
position: relative;
}
#container h1 {
/* has same bg as #container */
background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);
font-size: 12em;
font-family: impact;
left: 0;
line-height: 100%;
padding-top: 25px; /* padding + border of div */
position: absolute; /* position at top left of #containter to sync bg */
text-align: center;
top: 0;
width: 100%;
text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-text-fill-color: transparent;
-moz-background-clip: text;
}
这篇关于如何在像背景这样的文本下显示图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!