使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
我要評(píng)論
1. 代碼解析
在本例中，我們將通過(guò) HTML 和 CSS 實(shí)現(xiàn)一個(gè)文字鏤空的效果，同時(shí)加入一個(gè)背景圖片，使得背景內(nèi)容能夠透過(guò)文字顯示出來(lái)。
HTML 結(jié)構(gòu)
<body>
<div class="mask">
<span class="text">文字鏤空效果</span>
</div>
</body>這里我們簡(jiǎn)單地創(chuàng)建了一個(gè) div 元素，其中包含一個(gè) span 標(biāo)簽用于承載文本“文字鏤空效果”。span 標(biāo)簽用于實(shí)現(xiàn)文字鏤空的樣式效果，外層的 div 則主要負(fù)責(zé)設(shè)置背景遮罩。
CSS 樣式
body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}
.mask {
margin: 0;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.mask span {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24vh;
font-weight: bold;
-webkit-text-stroke: 1px #fff;
background: url(./img.jpeg) no-repeat center/cover;
color: transparent;
background-clip: text;
}詳細(xì)解釋?zhuān)?/h3>
body 樣式：
body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}
margin: 0：去除瀏覽器默認(rèn)的頁(yè)面邊距，確保頁(yè)面內(nèi)容從頂部和兩側(cè)開(kāi)始填充。height: 100vh：使 body 元素的高度占滿(mǎn)整個(gè)視口（100vh 表示 100% 的視口高度）。background: url(./img.jpeg) no-repeat center/cover：設(shè)置頁(yè)面背景圖片，圖片的路徑為 ./img.jpeg，圖片不會(huì)重復(fù)，且背景居中顯示，覆蓋整個(gè)容器。
.mask 樣式：
.mask {
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
height: 100%：mask 容器的高度占滿(mǎn)父容器（即視口的高度）。background: rgba(0, 0, 0, 0.7)：給 mask 容器設(shè)置一個(gè)半透明的黑色背景，增加文字的可見(jiàn)性。
.mask span 樣式：
.mask span {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24vh;
font-weight: bold;
-webkit-text-stroke: 1px #fff;
background: url(./img.jpeg) no-repeat center/cover;
color: transparent;
background-clip: text;
}
justify-content: center 和 align-items: center：使 span 標(biāo)簽中的文本水平和垂直居中。font-size: 24vh：這樣設(shè)置可以使文字跟隨視窗大小進(jìn)行變化。-webkit-text-stroke: 1px #fff：給文字添加白色的邊框，增加文字的輪廓感。這個(gè)屬性目前主要在 Webkit 內(nèi)核瀏覽器（如 Chrome 和 Safari）中生效。background: url(./img.jpeg) no-repeat center/cover：為文字設(shè)置背景圖片，使得背景圖覆蓋在文字區(qū)域。color: transparent：將文字的默認(rèn)顏色設(shè)置為透明，使文字區(qū)域看起來(lái)像鏤空，透過(guò)文字能夠看到背景圖。background-clip: text：這是實(shí)現(xiàn)文字鏤空效果的關(guān)鍵屬性。該屬性將背景裁剪到文字區(qū)域，使得背景圖片僅在文字內(nèi)部可見(jiàn)，文字外部則不會(huì)有任何背景顯示。
2. 文字鏤空效果的原理
body 樣式：
body {
margin: 0;
height: 100vh;
background: url(./img.jpeg) no-repeat center/cover;
}margin: 0：去除瀏覽器默認(rèn)的頁(yè)面邊距，確保頁(yè)面內(nèi)容從頂部和兩側(cè)開(kāi)始填充。height: 100vh：使body元素的高度占滿(mǎn)整個(gè)視口（100vh 表示 100% 的視口高度）。background: url(./img.jpeg) no-repeat center/cover：設(shè)置頁(yè)面背景圖片，圖片的路徑為./img.jpeg，圖片不會(huì)重復(fù)，且背景居中顯示，覆蓋整個(gè)容器。
.mask 樣式：
.mask {
height: 100%;
background: rgba(0, 0, 0, 0.7);
}height: 100%：mask容器的高度占滿(mǎn)父容器（即視口的高度）。background: rgba(0, 0, 0, 0.7)：給mask容器設(shè)置一個(gè)半透明的黑色背景，增加文字的可見(jiàn)性。
.mask span 樣式：
.mask span {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24vh;
font-weight: bold;
-webkit-text-stroke: 1px #fff;
background: url(./img.jpeg) no-repeat center/cover;
color: transparent;
background-clip: text;
}justify-content: center和align-items: center：使span標(biāo)簽中的文本水平和垂直居中。font-size: 24vh：這樣設(shè)置可以使文字跟隨視窗大小進(jìn)行變化。-webkit-text-stroke: 1px #fff：給文字添加白色的邊框，增加文字的輪廓感。這個(gè)屬性目前主要在 Webkit 內(nèi)核瀏覽器（如 Chrome 和 Safari）中生效。background: url(./img.jpeg) no-repeat center/cover：為文字設(shè)置背景圖片，使得背景圖覆蓋在文字區(qū)域。color: transparent：將文字的默認(rèn)顏色設(shè)置為透明，使文字區(qū)域看起來(lái)像鏤空，透過(guò)文字能夠看到背景圖。background-clip: text：這是實(shí)現(xiàn)文字鏤空效果的關(guān)鍵屬性。該屬性將背景裁剪到文字區(qū)域，使得背景圖片僅在文字內(nèi)部可見(jiàn)，文字外部則不會(huì)有任何背景顯示。
通過(guò) CSS 的 background-clip: text 屬性，我們可以將背景圖像限制在文本的區(qū)域內(nèi)。當(dāng)我們將 color 設(shè)置為透明時(shí)，文字區(qū)域內(nèi)就會(huì)顯示出背景圖。-webkit-text-stroke 用于給文字添加一個(gè)白色邊框，使得鏤空效果更加明顯，避免文字與背景圖過(guò)于融合。
這種效果的核心原理就是通過(guò)將文字區(qū)域的顏色透明化，同時(shí)應(yīng)用背景圖片和 background-clip 來(lái)讓文字區(qū)域的背景圖穿透顯示出來(lái)，形成一種視覺(jué)上“鏤空”的效果。
總結(jié)
通過(guò)簡(jiǎn)單的 HTML 和 CSS 技巧，我們可以輕松實(shí)現(xiàn)文字鏤空效果。此效果不僅提升了文本的視覺(jué)吸引力，還能有效地展示背景圖像或其他裝飾性元素。掌握這種技術(shù)，可以為你的網(wǎng)頁(yè)設(shè)計(jì)增添更多創(chuàng)意和視覺(jué)沖擊力。
以上就是使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例的詳細(xì)內(nèi)容，更多關(guān)于HTML CSS文字鏤空的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
html+css實(shí)現(xiàn)文字折疊特效實(shí)例
最近在學(xué)習(xí)html+css，于是整理了一下思路，寫(xiě)了一個(gè)小demo，本文主要介紹了html+css實(shí)現(xiàn)文字折疊特效實(shí)例，感興趣的小伙伴們可以參考一下2021-06-01
純css實(shí)現(xiàn)（無(wú)腳本）Html指令式tooltip文字提示效果
這篇文章主要介紹了純css實(shí)現(xiàn)（無(wú)腳本）Html指令式tooltip文字提示效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-07-17Html+css實(shí)現(xiàn)純文字和帶圖標(biāo)的按鈕
這篇文章主要介紹了Html+css實(shí)現(xiàn)純文字和帶圖標(biāo)按鈕的方法，按鈕有很多種外觀(guān)，本文介紹了純文字和帶圖標(biāo)兩種按鈕，感興趣的小伙伴們可以參考一下2016-02-24- 當(dāng)定義了 Text 的 height 屬性時(shí)，在 Text 中輸入的文字都不是垂直居中的，不過(guò)可以通過(guò)css來(lái)控制它，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-18
