数据结构
网络
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 次查看
广告