用html写一个网页水印,水印要铺满整个网页
时间: 2023-08-27 20:04:05 浏览: 74
以下是一个使用HTML和CSS实现网页水印的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页水印</title>
<style>
body {
margin: 0;
padding: 0;
}
.watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.2;
background-image: url("watermark.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="watermark"></div>
<h1>这是一个网页水印示例</h1>
<p>网页内容...</p>
</body>
</html>
```
在上述代码中,我们创建了一个全屏的div元素,并将其作为网页的背景,使用CSS设置了背景图片、透明度和重复方式,实现了网页水印的效果。注意,为了使水印始终在最底层,我们将其z-index设置为-1。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)