css防伪背景怎么打?

ssszwzr
  • 454

就是斜的 页面背景 写着你的用户名 那种 企业微信聊天框这种

直接设置背景图片肯定简单,但这变量怎么打,还要斜的 间隔?
回复
阅读 1.3k
1 个回答

核心方法是使用一个伪类,内容放在content属性中:

https://jsfiddle.net/wscats/5...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style>
        .mark {
            position: relative;
            width: 200px;
            height: 200px;
            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567251578623&di=75373c6cfa81e1bf472339fea80872f4&imgtype=0&src=http%3A%2F%2Fimage.17173.com%2Fbbs%2Fv1%2F2012%2F04%2F24%2F1335267566719.jpg') no-repeat;
            background-size: 200px;
        }

        .mark:before {
            content: "写上你的水印信息";
            font-size: 10px;
            position: absolute;
            bottom: 10%;
            right: 10%;
            margin-left: -80px;
            color: white;
            transform: rotate(-10deg);
        }
    </style>
    <div class="mark"></div>
</body>
</html>
你知道吗?

宣传栏