css让背景图片显示透明遮罩_CSS项目测试（支持深色模式）

*事先声明：本文章教程教学、文章封面来源自[CSS]聚光灯项目 by CodingStartup起码课，且已经CodingStartup起码课授权允许转载！

为了保持原有风格，本文始终保持与@CodingStartup起码课的视频风格一致

*在出现同样的代码块时，灰色为原有代码，彩色为新增/修改代码

Hello，Everybody

今天我们不讲别的，就来讲讲利用CSS做一个聚光灯。

先给大家放个例子：https://itmanchina.github.io/css-test(复制到浏览器打开)

到这里，有的小伙伴会问啦，这是怎么做到的？好神奇！

其实很简单，一层灰色的底层文字；顶层文字为彩色，套用css的圆形遮罩(Mask)，再加上css animation(移动效果)就可以了。

OK，回归正题：

项目总共分成两个部分

1.html

2.css*

因为html只占少量内容，我们重点把放在css上

(以下内容推荐到codepen.io或者其它代码实时预览网站测试！)

html部分：

<h1>TestTexth1>

css部分：

html {  font-size: 15px; }/*这里把文字【TestText】的大小设定为15px(不懂px的小伙伴请百度Picture  Element 【Pixel】) */

body{  background-color: #222;  /*背景颜色设为灰色*/  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  }  /*这一段css把文字【TestText】固定在html最中间的位置*/

h1{  color: #333; /*这里设定字体的颜色为灰黑色*/  font-family: Helvetica; /*这里设置字体为Helvetica(常用于西方语言字母)*/  margin: 0;  padding: 0;  font-size: 8rem; /*文字大小设定*/  letter-spacing: -0.2rem; /*文字间距设定*/}/*知识点1：rem 它是CSS3中新增加的一个尺寸(度量)单位，根节点(html)的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。*//*知识点2：margin 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度；块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。(允许存在负值)*//*知识点3：padding 简写属性在一个声明中设置所有内边距属性；这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。*/

↓写到这里，你的成果应该是这样的哦

(底部文字示例)

到这里，第一步算是完成了(长叹一口气)

(接着还是CSS的内容)

css部分(敲重点)：

h1::after{  content: 'TestText'; /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/  color: yellow; /*顶端文字颜色设为“黄色”*/  position: absolute; /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/  top: 0; /*顶端文字顶部距离*/  left: 0; /*顶端文字左端距离*/}

/*这时候，底部文字居中，顶部文字被固定在左上角*/

要将它(被设黄色的底部文字)与底部文字重叠起来，将h1字段(新增)position设定为relative就可以达到(顶部文字和底部文字)重叠的效果了

@CodingStartup起码课

也就是将上面的h1字段变成：

h1{  /*color: #333;*/  /*font-family: Helvetica;*/  /*margin: 0；*/  /*padding: 0;*/  /*font-size: 8rem;*/  /*letter-spacing: -0.2rem;*/  position: relative;  }

文字重叠完成！

效果图↓

(顶部文字与底部文字结合后示例)

紧接着，继续修改h1::after部分(套用圆形mask【遮罩】)【也是重点！！！】

h1::after{  /*content: 'TestText';*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/  /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/  /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/  /*top: 0;*/ /*顶端文字顶部距离*/  /*left: 0;*/ /*顶端文字左端距离*/  -webkit-clip-path: ellipse(100px 100px at 0% 50%); /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/  clip-path: ellipse(100px 100px at 0% 50%); }/*由于浏览器的支援性问题，Safari、Chrome等浏览器需要一段前缀【-webkit-】才能支持clip-path的属性*//*使用前缀时一定要保留原来的属性*//*为了防止已经支持clip-path属性的浏览器(FireFox等)出错，保留原来的clip-path属性*/

到了这一步，黄色的小聚光灯应该会出现在最左边的【Te】处

这时候，尝试把clip-path的0%修改为50%(-webkit-和原来的都修改一下)看看聚光灯是不是被移动到了文字的中间。如果是的话，证明代码有效。如果不变的话，请检查代码是否有误！

【记得修改成功后重新把左边的50%改回0%哦！！！】

【右边的50%是定值，不要动！！！】

↓(效果图)↓

(聚光灯居中示例)

好的，接下来继续创建新的区块：

@keyframes spotlight {  0% {    -webkit-clip-path: ellipse(100px 100px at 00% 50%);    clip-path: ellipse(100px 100px at 0% 50%);    /*这里直接套用完整的clip-path区块，下面的100%与0%用同样的数据*/  }  50% {    -webkit-clip-path: ellipse(100px 100px at 100% 50%);    clip-path: ellipse(100px 100px at 100% 50%);    /*50%的clip-path要把原本的0%改为100%，让mask(遮罩)到达文字的最右端*/  }  100% {    -webkit-clip-path: ellipse(100px 100px at 00% 50%);    clip-path: ellipse(100px 100px at 0% 50%);  }}/*keyframes的animation(动画)部分完成*/

动画部分完成得差不多啦，但还差一个重要的步骤！现在让我们继续将animation写入到h1::after中

h1::after{  /*content: 'TestText';*/ /*顶端文字的文字内容(与底端文字一致才能达到重叠效果)*/  /*color: yellow;*/ /*顶端文字颜色设为“黄色”*/  /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/  /*top: 0;*/ /*顶端文字顶部距离*/  /*left: 0;*/ /*顶端文字左端距离*/  /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/  /*clip-path: ellipse(100px 100px at 0% 50%);*/  animation: spotlight 5s infinite; /*让@keyframes里的动画5秒循环一次，动画永久循环*/  }

接下来有两个地方想修饰一下，第一，黄色的(顶端)文字是直接写在了h1::after里的content内，想把值设定在HTML里面

@CodingStartup起码课

①(终于)要对html部分动手了

<h1 data-spotlight="TestText">TestTexth1>

②继续改h1::after的内容

h1::after{  content: attr(data-spotlight); /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/  /*color: "yellow";*/ /*顶端文字颜色设为“黄色”*/  /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/  /*top: 0;*/ /*顶端文字顶部距离*/  /*left: 0;*/ /*顶端文字左端距离*/  /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/  /*clip-path: ellipse(100px 100px at 0% 50%);*/  /*animation: spotlight 5s infinite;*/ /*让@keyframes里的动画5秒循环一次，动画永久循环*/  }

第二，大家会发制作成品的文字(TestText)是彩色的而不是黄色(纯色)的

@CodingStartup起码课

方法是用上背景图片，把文字当做一个mask(遮罩)【彩色图片地址：https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg】

继续对h1::after动手

h1::after{  /*content: attr(data-spotlight);*/ /*这部分直接从h1中读取顶部文字的值而不用在这里设定一个值了*/  color: transparent; /*重中之重：顶端文字颜色设为“透明”*/  /*position: absolute;*/ /*css绝对定位(百度有较详细的介绍，这里不多赘述)*/  /*top: 0;*/ /*顶端文字顶部距离*/  /*left: 0;*/ /*顶端文字左端距离*/  /*-webkit-clip-path: ellipse(100px 100px at 0% 50%);*/ /*刻画一个直径为100px的正圆形，位置处于重叠文字的最左端、水平垂直的1/2处*/  /*clip-path: ellipse(100px 100px at 0% 50%);*/  /*animation: spotlight 5s infinite;*/ /*让@keyframes里的动画5秒循环一次，动画永久循环*/  background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg);  /*这里把背景设置为url内图片的链接*/  background-size: 150%; /*经背景放大为原来的1.5倍*/  background-position: center center; /*将背景图置中*/  -webkit-background-clip: text; /*详细介绍查看上文有关【-webkit-】的介绍*/  background-clip: text; /*将背景的绘图区域设定在文字中*/  }

到了这里，总算是搞定聚光灯效果的构建了

但是！因为这只是预览阶段的内容，所以暂时还不能直接发布到网络上！

Q：怎么办？

A：在html加入css的位置就可以了。

html部分(记得把这些代码保存到.html文件内)：

<html><head><title>CSS 测试title> <link href="1.css" rel="stylesheet" type="text/css" media="all" /> head><body><h1 data-spotlight="TestText">TestTexth1>body>html>

来一遍没有注释的完整的css：

html{  font-size：15px;}body{  background-color: #222;  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;}h1{  color: #333;  font-family: Helvetica;  margin: 0;  padding: 0;  font-size: 8rem;  letter-spacing: -0.2rem;  position: relative;}h1::after{  content: attr(data-spotlight);  color: transparent;  position: absolute;  left: 0;  top: 0;  -webkit-clip-path: ellipse(100px 100px at 0% 50%);  clip-path: ellipse(100px 100px at 0% 50%);  animation: spotlight 6s infinite;  background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg);  background-size: 150%;  background-position: center center;  -webkit-background-clip: text;  background-clip: text;}@keyframes spotlight {  0% {    -webkit-clip-path: ellipse(100px 100px at 00% 50%);    clip-path: ellipse(100px 100px at 0% 50%);  }  50% {    -webkit-clip-path: ellipse(100px 100px at 100% 50%);    clip-path: ellipse(100px 100px at 100% 50%);  }  100% {    -webkit-clip-path: ellipse(100px 100px at 00% 50%);    clip-path: ellipse(100px 100px at 0% 50%);  }}

最后，将这两个文件放置在服务器(或者Github Pages)的同一个目录下即可发布到网络上啦

~\(≧▽≦)/~

OK，以上就是关于CSS聚光灯项目的全部内容，觉得不错的话点个“在看吧”！

(也要记得关注CodingStartup起码课哦)

↓打赏一下

关注CodingStartup起码课↓

点个“在看”就是对我们最大的支持！?