网站首页 > 技术文章 正文
无聊打发时间,利用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 模板语言基础来啦
 
- 最近发表
 - 
- 聊一下 gRPC 的 C++ 异步编程_grpc 异步流模式
 - [原创首发]安全日志管理中心实战(3)——开源NIDS之suricata部署
 - 超详细手把手搭建在ubuntu系统的FFmpeg环境
 - Nginx运维之路(Docker多段构建新版本并增加第三方模
 - 92.1K小星星,一款开源免费的远程桌面,让你告别付费远程控制!
 - Go 人脸识别教程_piwigo人脸识别
 - 安卓手机安装Termux——搭建移动服务器
 - ubuntu 安装开发环境(c/c++ 15)_ubuntu安装c++编译器
 - Rust开发环境搭建指南:从安装到镜像配置的零坑实践
 - Windows系统安装VirtualBox构造本地Linux开发环境
 
 
- 标签列表
 - 
- cmd/c (90)
 - c++中::是什么意思 (84)
 - 标签用于 (71)
 - 主键只能有一个吗 (77)
 - c#console.writeline不显示 (95)
 - pythoncase语句 (88)
 - es6includes (74)
 - sqlset (76)
 - apt-getinstall-y (100)
 - node_modules怎么生成 (87)
 - chromepost (71)
 - flexdirection (73)
 - c++int转char (80)
 - mysqlany_value (79)
 - static函数和普通函数 (84)
 - el-date-picker开始日期早于结束日期 (76)
 - js判断是否是json字符串 (75)
 - c语言min函数头文件 (77)
 - asynccallback (87)
 - localstorage.removeitem (77)
 - vector线程安全吗 (73)
 - java (73)
 - js数组插入 (83)
 - mac安装java (72)
 - 无效的列索引 (74)
 
 
