给字体添加背景图 HTML+CSS
标题:给字体添加背景图 HTML+CSS问题描述:我们知道盒子或方形容器里面可以通过 background-image: url(…);设置背景图片,而文字的设置背景图却甚少,其实文字也可以像盒子里放背景图的。解决方案:1.写一个div标签,里面写文字。<div class="ceshi">给字体添加背景图片。</div>2.写css.ceshi{height: 100px
·
标题:给字体添加背景图 HTML+CSS
问题描述:
我们知道盒子或方形容器里面可以通过 background-image: url(…);设置背景图片,而文字的设置背景图却甚少,其实文字也可以像盒子里放背景图的。
解决方案:
1.写一个div标签,里面写文字。
<div class="ceshi">
给字体添加背景图片。
</div>
2.写css
.ceshi{
height: 100px;
width: 710px;
line-height: 100px;
font-size: 40px;
font-weight: 1000;
color: rgba(78, 75, 75,.1);
background-image: url(2.jpg);
background-size: 28% 140%;
-webkit-background-clip: text;
text-transform:uppercase;
}
*url里写入自己的图片地址
*最后两行
-webkit-background-clip: text;
text-transform:uppercase;
是实现效果重点,其它都是是背景图或字体的样式。
3.注意,如果没效果,是因为它在有些浏览器是不兼容的。
效果
更多推荐
已为社区贡献1条内容
所有评论(0)