纯css实现给图片加标签

原理：通过border、before、after、content、position定位，等等属性实现给图片添加标签样式。

效果截图如下：

代码实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>banner图片标签</title><style type="text/css">img{width: 500px;}.tags{margin: 100px auto auto 100px;}.tags:before{position: absolute;top: 5px;left: -8px;z-index: 1;padding-right: 10px;font-weight: bold;color: #000;height: 0px;line-height: 0px;border: #EE7600 15px solid;border-right-color: transparent;content: "图片";box-shadow: -0px 5px 5px -5px #000;}.tags:after{content: "";position: absolute;top: 35px;left: -8px;border: #89540c 4px solid;border-left-color: transparent;border-bottom-color: transparent;}</style></head><body><div class="tags" style="position: relative;"><img src="data:images/03.jpg" alt="网络图片"/></div></body>
</html>

注意：

这种通过定义css实现给图片添加标签的方法可以实现不同的标签样式。
例如：
结合css3圆角、css3渐变、before、after等属性，可以创建出（三角形、矩形、圆形、回形针等等）很多种效果。

尤其是将 回形针 与 拍立得相框 结合起来，效果更好！

以上就是关于“ 纯css实现给图片加标签 ” 的全部内容。

纯css实现给图片加标签相关推荐

纯CSS装饰画(给图片加画框)
共有12种装饰样式: 1.简单画廓 2.Mini图标 3.带文本画廓 4.弹出带文本的画廓 5.带纸片夹 6.Cork画板 7.图片标签 8.黑色艺术框 9.金色艺术框 10.水墨画 11.光晕画 1 ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
纯css实现正方体图片旋转效果
纯css实现正方体图片旋转效果目标效果基本思路代码实现主要困难注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果鼠标移入之后,图片开始依次旋转平移,旋转平移完成 ...
html 头尾代码自动,HTML Head Generator - 纯 CSS 实现的头部元标签代码生成器 - 钉子の次元...
前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦.没有到用一行 JavaSc ...
html 实现格子效果图,纯CSS实现动态图片的九宫格布局
起因最近碰到这样一个需求,要实现一个"九宫格图片"展示,设计师给过来的稿子是酱的是的,九宫格对应的是九种样式. 天不怕,地不怕,就怕设计有想法. 当一看到这样的需求,很多人的第 ...
图片阴影效果怎么设置html,css如何给图片加阴影？
css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如何使用css给图片添加阴影,希望对你们有所助. 方法1:设置box-shadow属性通 ...

纯css实现给图片加标签

纯css实现给图片加标签

效果截图如下：

代码实例：

注意：

纯css实现给图片加标签相关推荐

最新文章

热门文章