时间戳

首页 > 解决方案 > 如何将一张图片显示在另一张图片上作为背景？

html - 如何将一张图片显示在另一张图片上作为背景？

问题描述

我想将一个图像作为另一个图像的背景（它将是相同的图像）。这仅适用于移动版网站。我尝试了不同的位置和显示组合，但它不起作用，这是我所能得到的：

在此处输入图像描述

这就是我的 Vue 代码的样子：

   <div class="img-big">
      <img
        v-if="productCard.file"
        :src="`${productCard.file}`"
        :alt="productCard.altText || productCard.text"
        class="blur-background-img"
      >
      <img
        v-if="productCard.file"
        :src="
          `${productCard.file}`
        "
        :alt="productCard.altText || productCard.text"
      />
    </div>

这是scss代码：

  .img-big {
    img {
      display: block;
      margin: 0px auto;
      @media only screen and (max-width: 420px) {
        z-index: 2;
        width: 70%;
        top: 0;
      }
    }
    .blur-background-img {
      z-index: 1;
      filter: blur(8px);
      margin: 0;
      width: 100%;
    }
  }

我知道唯一可以正常工作的是z-index，但我需要将一张图像（不模糊）放在另一张图像（模糊，作为背景）上

标签： htmlcssvue.js

解决方案

用于position: relative模糊图像和position: absolute另一张图像，以便可以相对于模糊图像定位。

#outerCircle {
  position: relative;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#styleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 10%;
  /*Used to reposition*/
  left: 10%;
  /*Used to reposition*/
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}
<div id="outerCircle">
  <div id="styleCircle"></div>
</div>

推荐阅读