*事先聲明：本文章教程教學、文章封面來源自[CSS]聚光燈項目 by CodingStartup起碼課，且已經(jīng)CodingStartup起碼課授權允許轉(zhuǎn)載！

為了保持原有風格，本文始終保持與@CodingStartup起碼課的視頻風格一致

*在出現(xiàn)同樣的代碼塊時，灰色為原有代碼，彩色為新增/修改代碼

Hello，Everybody

今天我們不講別的，就來講講利用CSS做一個聚光燈。

先給大家放個例子：https://itmanchina.github.io/css-test(復制到瀏覽器打開)

到這里，有的小伙伴會問啦，這是怎么做到的？好神奇！

其實很簡單，一層灰色的底層文字；頂層文字為彩色，套用css的圓形遮罩(Mask)，再加上css animation(移動效果)就可以了。

OK，回歸正題：

項目總共分成兩個部分

1.html

2.css*

因為html只占少量內(nèi)容，我們重點把放在css上

(以下內(nèi)容推薦到codepen.io或者其它代碼實時預覽網(wǎng)站測試！)

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中新增加的一個尺寸(度量)單位，根節(jié)點(html)的font-size決定了rem的尺寸，也就是說它是一個相對單位，相對于(html)。*//*知識點2：margin 這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度；塊級元素的垂直相鄰外邊距會合并，而行內(nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。(允許存在負值)*//*知識點3：padding 簡寫屬性在一個聲明中設置所有內(nèi)邊距屬性；這個簡寫屬性設置元素所有內(nèi)邊距的寬度，或者設置各邊上內(nèi)邊距的寬度。行內(nèi)非替換元素上設置的內(nèi)邊距不會影響行高計算；因此，如果一個元素既有內(nèi)邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內(nèi)容重疊。元素的背景會延伸穿過內(nèi)邊距。不允許指定負邊距值。*/

↓寫到這里，你的成果應該是這樣的哦

(底部文字示例)

到這里，第一步算是完成了(長嘆一口氣)

(接著還是CSS的內(nèi)容)

css部分(敲重點)：

h1::after{??content:?'TestText';?/*頂端文字的文字內(nèi)容(與底端文字一致才能達到重疊效果)*/??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;??}

文字重疊完成！

效果圖↓

(頂部文字與底部文字結(jié)合后示例)

緊接著，繼續(xù)修改h1::after部分(套用圓形mask【遮罩】)【也是重點！！！】

h1::after{ /*content: 'TestText';*/ /*頂端文字的文字內(nèi)容(與底端文字一致才能達到重疊效果)*/??/*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的屬性*//*使用前綴時一定要保留原來的屬性*//*為了防止已經(jīng)支持clip-path屬性的瀏覽器(FireFox等)出錯，保留原來的clip-path屬性*/

到了這一步，黃色的小聚光燈應該會出現(xiàn)在最左邊的【Te】處

這時候，嘗試把clip-path的0%修改為50%(-webkit-和原來的都修改一下)看看聚光燈是不是被移動到了文字的中間。如果是的話，證明代碼有效。如果不變的話，請檢查代碼是否有誤！

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

【右邊的50%是定值，不要動！！！】

↓(效果圖)↓

(聚光燈居中示例)

好的，接下來繼續(xù)創(chuàng)建新的區(qū)塊：

@keyframes spotlight { 0% { -webkit-clip-path: ellipse(100px 100px at 00% 50%); clip-path: ellipse(100px 100px at 0% 50%);????/*這里直接套用完整的clip-path區(qū)塊，下面的100%與0%用同樣的數(shù)據(jù)*/ } 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(動畫)部分完成*/

動畫部分完成得差不多啦，但還差一個重要的步驟！現(xiàn)在讓我們繼續(xù)將animation寫入到h1::after中

h1::after{ /*content: 'TestText';*/ /*頂端文字的文字內(nèi)容(與底端文字一致才能達到重疊效果)*/??/*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秒循環(huán)一次，動畫永久循環(huán)*/ }

接下來有兩個地方想修飾一下，第一，黃色的(頂端)文字是直接寫在了h1::after里的content內(nèi)，想把值設定在HTML里面

@CodingStartup起碼課

①(終于)要對html部分動手了

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

②繼續(xù)改h1::after的內(nèi)容

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秒循環(huán)一次，動畫永久循環(huán)*/ }

第二，大家會發(fā)制作成品的文字(TestText)是彩色的而不是黃色(純色)的

@CodingStartup起碼課

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

繼續(xù)對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秒循環(huán)一次，動畫永久循環(huán)*/??background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg);??/*這里把背景設置為url內(nèi)圖片的鏈接*/??background-size:?150%;?/*經(jīng)背景放大為原來的1.5倍*/??background-position:?center?center;?/*將背景圖置中*/??-webkit-background-clip:?text;?/*詳細介紹查看上文有關【-webkit-】的介紹*/??background-clip:?text;?/*將背景的繪圖區(qū)域設定在文字中*/ }

到了這里，總算是搞定聚光燈效果的構建了

但是！因為這只是預覽階段的內(nèi)容，所以暫時還不能直接發(fā)布到網(wǎng)絡上！

Q：怎么辦？

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

html部分(記得把這些代碼保存到.html文件內(nèi))：

<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)的同一個目錄下即可發(fā)布到網(wǎng)絡上啦

~\(≧▽≦)/~

OK，以上就是關于CSS聚光燈項目的全部內(nèi)容，覺得不錯的話點個“在看吧”！

(也要記得關注CodingStartup起碼課哦)

↓打賞一下

關注CodingStartup起碼課↓

點個“在看”就是對我們最大的支持！?

總結(jié)

以上是生活随笔為你收集整理的css让背景图片显示透明遮罩_CSS项目测试（支持深色模式）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。