码迷,mamicode.com
首页 > 其他好文 > 详细

酷炫字体背景图的实现——神奇的background-clip: text

时间:2018-10-05 18:54:34      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:size   http   doc   head   其他   clip   sbin   绘制   charset   

  愉快的时光总是飞快,七天小长假已接近尾声,抓住假期的尾巴,再学个新知识点——css的background-clip: text属性...会不会有种陌生的感觉,毕竟在我们的印象里,background-clip只有padding-box、border-box、content-box三个属性,这个text是个什么鬼???没用过没关系,今天就来看看它用什么妙用...

 

  background-clip的定义:规定背景的绘制区域;简而言之,background-clip就是规定background-color/background-image背景(色/图)在盒模型里的作用范围...

 

  清楚了background-clip的定义,就可以放心的使用了...不过还要说明一点——兼容性,background-clip:text属性目前只有chrome浏览器支持较好,其他内核的不支持...这个注意就行了,使用的时候这么写: -webkit-background-clip:text;接下来看看这个属性是如何实现字体背景图的...

 

  开始之前,先来看一个酷炫的效果,看懂这个就基本不用往下看了...毕竟也不难,注意几个地方就行了...传送链接:https://jsbin.com/tisodirawi/edit?html,output

   使用了这个属性的意思是:以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉...

 

使用背景图片时:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>background-clip</title>
  <style>
    div {
      margin: auto;
      width: 1000px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 120px;
      font-weight: bold;
      color: transparent;  /* 重点1 */
      background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493353832&di=c063b6b9c89082e96ffee0766112ffec&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0111%2F07%2F3.jpg%21960.jpg") no-repeat center center;
      background-size: cover;
      -webkit-background-clip: text;  /* 重点2 */
    }
  </style>
</head>
<body>
<div>background-clip</div>
</body>
</html>

 

  总结:背景属性设置background-clip:text,同时字体颜色color:transparent;用背景色填充字体颜色...即可

 

  参考链接http://web.jobbole.com/91212/?tdsourcetag=s_pctim_aiomsg(推荐必看)

 

酷炫字体背景图的实现——神奇的background-clip: text

标签:size   http   doc   head   其他   clip   sbin   绘制   charset   

原文地址:https://www.cnblogs.com/chenwenhao/p/9745201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!