在网站设计中,我们经常需要添加各种标志、图标或者通知信息。其中,一个常见的需求就是在图片的右上角添加New(或其他提示)标志。
.img{ position: relative; display: inline-block; } .new{ position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: url(../images/new.png); background-size: cover; }
实现方法很简单,首先给图片容器设置position: relative; ,其次在需要添加提示的图片上,创建一个新的div容器,并为其添加样式class.new。在该class样式中设置 position: absolute; 以实现绝对定位。设置 right: 0; top: 0; 可以使其定位在图片的右上角。然后再设置提示标志的宽度、高度和背景图即可。
有时候,我们可能需要添加其他标志,如热门、打折、礼物等等。只需将提示标志的背景图替换为相应的图片即可。
这种方法不仅简单易用,而且兼容性良好,适用于大部分浏览器。我们可以轻松实现图片右上角添加各种提示标志的效果,美化网站,提高用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。