資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立響應式鏤空/挖空文字？
響應式鏤空文字會在網頁瀏覽器大小改變時進行轉換。鏤空文字看起來像是從表面上切出來以顯示背景。首先，我們將使用 background-image 屬性在網頁上放置背景影像。文字將使用 position 屬性放置。要進行轉換，將使用 translate()。
設定背景影像
要建立鏤空文字，首先設定文字將顯示其上的背景影像。背景影像將使用帶有 url() 的 background-image 屬性包含 -
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
背景影像的容器
容器使用 position 屬性定位背景影像。使用 height 屬性設定高度 -
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
position: relative;
height: 300px;
}
放置文字
將文字放置在影像容器內 -
<div class="image-container"> <div class="text">FOREST</div> </div>
定位文字
文字使用 position 屬性和值 absolute 在影像上定位 -
.text {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
}
轉換文字
鏤空文字使用 transform 屬性和 translate() 方法進行轉換。translate 允許更改位置 -
transform: translate(-50%, -50%);
混合文字
要將文字與其直接父背景混合，使用mix-blend-mode 屬性。混合模式使用 mix-blend-mode 屬性的multiply 值設定為 multiply -
mix-blend-mode: multiply;
示例
要使用 CSS 建立響應式鏤空文字，程式碼如下 -
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
position: relative;
height: 300px;
}
.text {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Cutout Text Example</h1>
<div class="image-container">
<div class="text">FOREST</div>
</div>
</body>
</html>
更新於: 2023-12-08
189 次檢視
廣告