熙海啵啵

标题: 给网站内容添加一个原创标识 [打印本页]

作者: admin 时间: 2022-4-24 18:40
标题: 给网站内容添加一个原创标识

无聊打发时间，利用css简单写一个给网站文章内容的右上角添加一个原创标识；

用来提醒他人本篇为本站原创，转发文章时候请附转载地址。

[attach]472[/attach]

首先，我们修改下方css类名“tx-box”改为你自己文章最外层盒子的类名，找不到可联系小编鹏仔帮你哦。

然后，修改background 的图片路径，图片大家自行下载（ps简单做了两个小图标，一个带白的阴影，一个不带，自行选择，psd忘记保存，也没什么需要修改），引入。

接着将下方css放到网站公共css中，或者找到文章区域引入css的文件。

复制

.tx-box .info-con{

    position: relative;

}

.tp-yuanchuang{

    position: absolute;

    top: 0;

    right: 0;

    z-index: 1;

    opacity: .8;

    width: 110px;

    height: 70px;

    background: url(图片路径) no-repeat;

    background-size: auto;

}

opacity为水印透明度，0-1范围，如果觉得颜色比较重，可往小的设置 .5

最后，我们在编辑文章时候，哪篇文章需要，我们在文章编辑时，编辑器的html中，放入下方html代码即可。

复制

<div class="tp-yuanchuang"></div>

欢迎光临熙海啵啵 (http://cece56.cn/)