图片右侧加文字html完整代码,怎么用css在图片右下方添加文字

2024-04-11 19:17:50

有时候在一些广告图片的下面显示“广告”字眼，或者在gif动图也有显示，那么这个通过css怎么实现呢

我们来看html代码

广告

在看em的css是怎么定义的，这么需要用到定义的属性

a {

display: block;

position: relative;

}

父元素的 position: relative;然后我们在来设置em属性

a em {

position: absolute;

right: 0;

bottom: 0px;

background: #fff;

color: #666;

padding: 0px 5px;

border-radius: 3px 0 0 0;

opacity: 0.3;

font-size: 12px;

font-style: normal;

}

然后子元素定位为 position: absolute;然后加上top ,left,bottom等属性定位左上，左下，右上，右下

这样就达到想要的效果了

来段完整的代码

.demo a {

display: block;

position: relative;

}

.demo a em {

position: absolute;

left: 0;

bottom: 0px;

background: #fff;

color: #666;

padding: 0px 5px;

border-radius: 3px 0 0 0;

opacity: 0.3;

font-size: 12px;

font-style: normal;

}

广告

图片右侧加文字html完整代码,怎么用css在图片右下方添加文字相关推荐

http://184.154.128.246/index.php,小程序实现自动加载的完整代码
本篇文章给大家带来的内容是关于小程序实现自动加载的完整代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 售中({{count}}) 已售({{counts}}) {{item.go ...
【深度学习】(5) 简单网络，案例：服装图片分类，附python完整代码
1. 数据获取使用系统内部的服装数据集构建神经网络.首先导入需要的库文件,x和y中保存训练集的图像和目标.x_test和y_test中保存测试集需要的图像和目标.(x, y)及(x_test, y_ ...
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
C++阶段02笔记【通讯录管理系统完整代码（系统需求、创建项目、添加/显示/删除/查找/修改/清空）】
C++| 匠心之作从0到1入门学编程[视频+课件+笔记+源码] 目录 01.系统需求 02.创建项目 2.1 创建项目 2.2 添加文件 03.菜单功能 04.退出功能 05.添加联系人 5.1 设 ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
php图片下载代码,php下载css中图片代码
提供一个常见的php下载css中图片代码,有需要的朋友可以下载,只要把$url填写好就行了哈. 代码如下复制代码 $host = $host[1]; if (!is_dir('img')) { m ...
Gif添加文字怎么操作？如何在线gif动图上添加文字？
想要在gif动图上添加文字,应该怎么实现呢?很简单,只需要使用[GIF中文网]的gif加字(https://www.gif.cn/gifjiazi)功能就能实现,只需上传50M以内的gif动图,就可以 ...
css背景上能添加文字,CSS3怎么为文字添加背景?
这两天在写官网,标题标语之类的文字都是带有流光溢.炫酷图案的文字大致就像苹果官网上的那些slogan吧,可不是简单的渐变色之类哦但是由于使用了CSS3属性,所以要考虑到兼容性,仅Webkit内核的 ...
计算机中文字底纹咋操作,word文档中的如何添加文字背景？ -电脑资料
格式菜单>>背景里面选择, ------ 让你的Word文档背景更漂亮大家知道,在默认设置下,Word文档的背景都是单调的白色.如果你喜欢让它变得更漂亮些,可以采取下面的方法尝试改变背 ...
python 识别登陆验证码图片(完整代码)_python 识别登录验证码图片功能的实现代码（完整代码）...
在编写自动化测试用例的时候,每次登录都需要输入验证码,后来想把让python自己识别图片里的验证码,不需要自己手动登陆,所以查了一下识别功能怎么实现,做一下笔记. 首选导入一些用到的库,re.Imag ...

最新文章

热门文章