极客教程CSS 给图片加水印
在网页设计中，为了保护图片的版权或者为了增加图片的专属性，我们经常需要给图片添加水印。水印是一种透明的标记，通常包含有版权信息、公司标识等内容。在本文中，我们将介绍如何使用CSS给图片添加水印。
1. 使用 ::after 伪元素添加水印
我们可以使用CSS的伪元素 ::after 来给图片添加水印。下面是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们给图片添加了一个水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
2. 使用 background-image 添加水印
除了使用 ::after 伪元素，我们还可以使用 background-image 属性来给图片添加水印。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
background-image: url('https://static.deepinout.com/geekdocs/2024/04/02/20240316065750-1.jpg');
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们给图片添加了一个水印，水印图片为 ‘https://static.deepinout.com/geekdocs/2024/04/02/20240316065750-1.jpg’，并且位于图片的右下角。
3. 使用 filter 属性添加水印
除了上面的方法，我们还可以使用 CSS 的 filter 属性来给图片添加水印。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
filter: blur(2px);
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们给图片添加了一个模糊的水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
4. 使用 mix-blend-mode 属性添加水印
另一种给图片添加水印的方法是使用 CSS 的 mix-blend-mode 属性。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们给图片添加了一个混合模式的水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
5. 使用 CSS 动画添加水印
我们还可以使用 CSS 动画来给图片添加水印，让水印具有动态效果。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
animation: watermarkAnimation 2s infinite alternate;
}
@keyframes watermarkAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们给图片添加了一个动态效果的水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
6. 使用 CSS 变量添加水印
我们还可以使用 CSS 变量来给图片添加水印，这样可以方便地修改水印的样式。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
:root {
--watermark-text: '© geek-docs.com';
--watermark-color: rgba(0, 0, 0, 0.5);
--watermark-font-size: 12px;
}
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: var(--watermark-text);
position: absolute;
bottom: 10px;
right: 10px;
color: var(--watermark-color);
font-size: var(--watermark-font-size);
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们使用了 CSS 变量来定义水印的文本、颜色和字体大小，这样可以方便地修改水印的样式。
7. 使用 CSS Grid 布局添加水印
我们还可以使用 CSS Grid 布局来给图片添加水印，这样可以更灵活地控制水印的位置。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
height: 300px;
}
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们使用了 CSS Grid 布局来给图片添加水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
8. 使用 CSS Flex 布局添加水印
除了使用 CSS Grid 布局，我们还可以使用 CSS Flex 布局来给图片添加水印。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们使用了 CSS Flex 布局来给图片添加水印，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
9. 使用 CSS 动态伪类添加水印
我们还可以使用 CSS 的动态伪类来给图片添加水印，让水印在鼠标悬停时显示。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
opacity: 0;
transition: opacity 0.3s;
}
.watermark:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们使用了 CSS 的动态伪类来给图片添加水印，让水印在鼠标悬停时显示，水印内容为 ‘© geek-docs.com’，并且位于图片的右下角。
10. 使用 CSS 变换添加水印
最后，我们可以使用 CSS 的变换来给图片添加水印，让水印具有旋转、缩放等效果。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Watermark</title>
<style>
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: '© geek-docs.com';
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="watermark">
<img src="https://static.deepinout.com/gk-static/logo.png" alt="Image">
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们使用了 CSS 的变换来给图片添加水印，让水印内容为 ‘© geek-docs.com’，并且位于图片的右下角并且旋转了45度。
通过以上示例，我们学习了如何使用不同的方法给图片添加水印，可以根据实际需求选择合适的方法来实现图片水印效果。