css 图片 右上角 new

在网站设计中，我们经常需要添加各种标志、图标或者通知信息。其中，一个常见的需求就是在图片的右上角添加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; 可以使其定位在图片的右上角。然后再设置提示标志的宽度、高度和背景图即可。

有时候，我们可能需要添加其他标志，如热门、打折、礼物等等。只需将提示标志的背景图替换为相应的图片即可。

这种方法不仅简单易用，而且兼容性良好，适用于大部分浏览器。我们可以轻松实现图片右上角添加各种提示标志的效果，美化网站，提高用户体验。