css文字水印重复斜着铺满整个div

renkai721

于 2024-09-07 14:33:43 发布

阅读量115

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/renkai721/article/details/141995629

版权

前端专栏收录该内容

33 篇文章 4 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

需求背景

最近想要实现一个效果，把手机号或者公司名称的水印铺满整个div页面，需要的逻辑是重复，铺满，斜着展示。百度了一圈搜的都是背景图片铺满div，一直达不到想要的效果，这里记录一下。

实现效果

操作教程

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
		.water_word{
			position: fixed;
			top: 0;
			bottom: 0;
			left: -140px;
			right: 0;
			pointer-events: none;
			width: 200%;
		}
		.water_word div{
			color: #ebebeb;
			pointer-events: none;
			display: inline-block;
			width: 220px;
			height: 26px;
			font-size: 20px;
			transform: rotateZ(-12deg);
			margin: 80px 47px;
		}
    </style&g

了解本专栏