愉快的时光总是飞快，七天小长假已接近尾声，抓住假期的尾巴，再学个新知识点——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的更多相关文章

  1. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  2. Python 竟能绘制如此酷炫的三维图

    通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体 我们先以下面这个八面体 ...

  3. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  4. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. js实现刷新页面出现随机背景图

    直接上代码: <script>         var bodyBgs = [];         bodyBgs[0] = "IMG/01.jpg";         ...

  6. css背景图自适应

    在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: u ...

  7. vue动态绑定图片和背景图

    1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...

  8. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  9. IntelliJ IDEA 换背景免费酷炫的插件（转）

    一.插件的安装 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 分别是安装JetBrains插件,第三方插件,本地已下载的插件包. 二 ...

随机推荐

  1. 关于C#/sqlserver生成32位数据库字段总结

    一.C#中用Guid.NewGuid().ToString() Sql中用NEWID()   以上方法生成的是36位的GUID,如果需要转换成32位,则需要替换掉其中的'-'字符. Sql中的方法:r ...

  2. CentOS下Docker与.netcore(二) 之 Dockerfile

    CentOS下Docker与.netcore(一) 之 安装 CentOS下Docker与.netcore(二) 之 Dockerfile CentOS下Docker与.netcore(三)之 三剑客 ...

  3. Entity Framework中的连接管理

    EF框架对数据库的连接提供了一系列的默认行为,通常情况下不需要我们太多的关注.但是,这种封装,降低了灵活性,有时我们需要对数据库连接加以控制. EF提供了两种方案控制数据库连接: 传递到Context ...

  4. NOIP模拟赛

    T1 1.聪明的小偷 (thief.pas/c/cpp) [问题描述] 从前有一个收藏家收藏了许多相同的硬币,并且将它们放在了n个排成一排的口袋里,每个口袋里都装了一定数量的硬币. 这些硬币价值不菲, ...

  5. webpack构建多页面react项目（webpack+typescript+react）

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  6. 2016级算法第二次上机-A.画个圈圈诅咒你

    890 画个圈圈诅咒你 思路 简单题.题目中的圆并没有什么实际作用,简化成线段重合问题会更好理解些. 暴力解法:使用双重for循环会T到想哭,记住最直接的方法一般是过不了题的. 解法一:二分查找.空间 ...

  7. SQL总结-----触发器

    概念 触发器是一种特殊类型的存储过程,不由用户直接调用.创建触发器时会对其进行定义,以便在对特定表或列作特定类型的数据修改时执行. 触发器可以查询其他表,而且可以包含复杂的 SQL 语句. 它们主要用 ...

  8. [Java]去除html中的标签或者元素属性（正则表达式）

    后台的数据库中某个字段是富文本框输入的 带有Html的标签 ,去掉标签后返回给前台 1.去掉Html 标签的代码 //过滤html标签 Pattern p_html = Pattern.compile ...

  9. 移动端遇到的常见JS与CSS问题及解决方法

    由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...

  10. Linux之shell

    shell的中文意思是外壳. 通常在图形界面中对实际体验带来的差异不是不同发行版本的终端模拟器,而是shell这个壳. 壳在核外,shell里面的核就是linux内核. shell指的是:提供给使用者 ...