记住用户名密码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element-watermark</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
p {
margin: 0;
}
</style>
<body>
<div style="background-color: white;">
<p style="height:1500px">南天门</p>
<p>地府</p>
</div>
<script>
function cssHelper(el, prototype) {
for (let i in prototype) {
el.style[i] = prototype[i]
}
}
const waterWrapper = document.createElement('div');
cssHelper(waterWrapper, {
position: 'fixed',
top: '0px',
right: '0px ',
bottom: '0px',
left: '0px',
overflow: 'hidden',
display: 'flex',
'flex-wrap': 'wrap',
'pointer-events': 'none'
})
const waterHeight = 170;
const waterWidth = 130;
const { clientWidth, clientHeight } = document.documentElement || document.body;
console.log("clientWidth, clientHeight----", clientWidth, clientHeight)
const column = Math.ceil(clientWidth / waterWidth);
const rows = Math.ceil(clientHeight / waterHeight);
function createItem(i) {
const item = document.createElement('img');
// 图片水印设置 item.src = '图片水印地址'
// 文本水印设置 item.innerHTML = '水印内容'
item.src = 'https://via.placeholder.com/128x90.png/09f/fff'
console.log("i-----", i)
cssHelper(item, {
position: 'absolute',
top: `0px`,
// left: `0px`, // 正常排列展示
left: `${i % 2 === 1 ? '35px' : '-15px'}`, // 交叉展示
display: `${i % 2 === 1 ? 'none' : 'block'}`, // 交叉展示
width: `138px`,
height: `36px`,
opacity: 1,
transform: `rotate(-15deg)`,
objectFit: 'contain'
// 文本水印设置
// fontSize: `16px`,
// color: '#000',
// lineHeight: 1.5,
// transformOrigin: '0 0',
// userSelect: 'none',
// whiteSpace: 'nowrap',
// overflow: 'hidden',
})
return item
}
console.log("column-", column);
console.log("rows-", rows);
for (let i = 0; i < column * rows; i++) {
const wrap = document.createElement('div');
cssHelper(wrap, Object.create({
position: 'relative',
width: `${waterWidth}px`,
height: `${waterHeight}px`,
flex: `0 0 ${clientWidth / 3}px`, // 每行展示三个
// overflow: 'hidden',
}));
wrap.appendChild(createItem(i));
waterWrapper.appendChild(wrap)
}
document.body.appendChild(waterWrapper)
</script>
</body>
</html>
目前有 0 条留言 其中：访客:0 条, 博主:0 条