给页面减少水印
效果图:
water.js:
import React from "react";
import "./index.less";
function WaterMark(props) {const { children} = props;
return (
<div className="waterMark">
<div className="text">
{children}
</div>
</div>
)
}
export default WaterMark;
index.less:
.waterMark {
position : fixed;
top : 0;
bottom : 0;
right : 0;
left : 0;
display : flex;
justify-content: center;
align-items : center;
pointer-events : none;
.text {color : rgba(#999, 0.3);
width : 50vw;
height : 50vh;
line-height : 40vh;
font-size : 40vh;
text-align : center;
transform : rotateZ(-45deg);
pointer-events: none;
}
}
how to use:
import WaterMark from "components/WaterMark";
<WaterMark>Hello World</WaterMark>