[html+css]图片按文字样式裁剪

最新推荐文章于 2023-08-07 11:11:57 发布

秃头菜鸟

最新推荐文章于 2023-08-07 11:11:57 发布

阅读量627

点赞数

本文链接：https://blog.csdn.net/qq_19883981/article/details/107101926

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

直接上代码

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
    <br><style>
    #hello h1 {
  font-size: 300px;/*设置文字大小*/
  text-transform: uppercase;/*默认字母大写*/
  font-weight: 900;/*设置字符的粗细*/
  letter-spacing: 10px;/*设置间隔*/
  position: absolute;/*设置绝对定位*/
  top: 50%;/*顶部*/
  left: 50%;/*左边*/
  transform: translate(-50%, -50%);/*2D转换，（x,y）*/
  margin: 0;/*边距*/
  background: url("./images/6666.jpg") 50% 50%;  /*换成图片url或者本地路径即可，居中显示*/
  background-size: cover;/*背景的尺寸*/
  -webkit-text-fill-color: transparent;/*将背景图像剪切到文本形状*/
  -webkit-background-clip: text;/*将背景图像剪切到文本形状*/
  background-clip: text;/*指定背景绘画区域*/
}</style>
</head>

<body>
<div id="hello">
  <h1>Hello</h1>
</div>
</body>
</html>