网站首页 > 技术文章 正文
无聊打发时间,利用css简单写一个给网站文章内容的右上角添加一个原创标识;
用来提醒他人本篇为本站原创,转发文章时候请附转载地址。
首先,我们修改下方css类名“tx-box”改为你自己文章最外层盒子的类名,找不到可联系小编鹏仔帮你哦。
然后,修改background 的图片路径,图片大家自行下载(ps简单做了两个小图标,一个带白的阴影,一个不带,自行选择,psd忘记保存,也没什么需要修改),引入。
下载图片 iqzhan.com/post/69.html
接着将下方css放到网站公共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代码即可。
Markup
<div class="tp-yuanchuang"></div>
猜你喜欢
- 2024-10-21 HTML制作网页先熟悉CSS(用html和css做网页教程)
- 2024-10-21 HTML简单介绍及常见元素(html的元素组成部分有哪些?)
- 2024-10-21 Go Web 框架 Gin 学习2 - 模板渲染的2种方式
- 2024-10-21 HTML自定义组件(html 组件)
- 2024-10-21 Html小知识总结(html基础总结)
- 2024-10-21 你的HTML页面书写规范吗?必须知道的HTML书写规范
- 2024-10-21 用C++写出HTML,使用web服务,可以免费搭建个人博客
- 2024-10-21 【JavaScript】将执行上下文、作用域、闭包串联起来
- 2024-10-21 7.HTML中的列表、引用和代码的使用
- 2024-10-21 小白必看!Django 模板语言基础来啦
- 04-29kali2021ping 外网不通
- 04-29我是如何用这3个小工具,助力小姐姐提升100%开发效率的
- 04-29注册下载啊
- 04-29Spring 中三种 BeanName 生成器!
- 04-29mysql学习9:创建数据库
- 04-29Linux之yum源详解
- 04-29夏日终曲/请以你的名字呼唤我/Call me by your name(无剧透)
- 04-29注释竟然还有特殊用途?一文解惑 //go:linkname 指令
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- sqlset (59)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)