How to display one image on another as a background? [duplicate]-CodePudding

This question already has answers here:

This is how my Vue code looks like:

   <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>

And this is scss code:

  .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%;
    }
  }

The only thing that I know works correctly is z-index, but I need to put one image (not blurred) on another (blurred, as a background)

CodePudding user response：

Use position: relative for blurred image and position: absolute for another one so that it can be positioned relative to blurred one .

#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>

Page link：https//www.codepudding.com/Blockchain/115781.html

Prev:Vue MultiSelect's Custom Label not working?

Next:How to add @change to a custom Vue component