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

时间:2020-07-03作者:klpeng分类:IT综合浏览:410评论: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>

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

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢