css中怎么让小图片覆盖网页

在网页设计中，有时候我们会想让一张小图片悬浮在页面的某个位置，例如一个小不点的微信二维码，用户可以通过扫码关注我们的公众号。那么如何实现这个效果呢？

// HTML
<div class="qr-code">
  <img src="qrcode.jpg" alt="WeChat QR Code">
</div>

// CSS
.qr-code {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  padding: 10px;
  z-index: 9999;
}

.qr-code img {
  width: 80px;
  height: 80px;
} 

首先，在 HTML 中我们创建一个 div 元素，类名为 "qr-code"。在 div 中嵌套一张图片，图片的位置和样式将在 CSS 中进行定义。

接下来，我们进入 CSS 部分。首先，我们对 .qr-code 进行定位，使用绝对定位（absolute）来让它脱离文档流，并将它的顶部（top）和右边（right）与页面边缘的距离设定为 10px。然后，我们为 .qr-code 设置宽度和高度（width 和 height），并设置一个白色背景颜色和淡灰色的阴影效果，以及一定的内边距（padding）以使图片不至于与边界过于接近。

接下来，我们对 .qr-code img 进行样式设置，将图片的宽度和高度设定为 80px。这样，在 100px x 100px 的容器中，图片会居中显示，并在周围留出一定的留白。

此外，我们还设置了一个 z-index 属性为 9999，使得 .qr-code 能够处于页面上其他元素之上，不被覆盖。

最后，我们得到了一张漂亮的微信二维码图片，它会悬浮于页面的右上角，为用户提供方便的扫码二维码入口。