给字体添加背景图 HTML+CSS

最新推荐文章于 2024-08-17 10:21:33 发布

前端黑眼圈

最新推荐文章于 2024-08-17 10:21:33 发布

阅读量743

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36595944/article/details/110876293

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用CSS的`background-image`，`background-size`，`-webkit-background-clip`和`text-transform`属性，将背景图片应用于字体，创建独特的文字视觉效果。通过设置高度、宽度、行高和字体大小等样式，调整背景图片的显示，并用透明颜色为字体着色，实现了背景图片与文字的完美结合。

摘要由CSDN通过智能技术生成

html

<div class="ceshi">
     给字体添加背景图片。
</div>

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;