How to set background with opacity without affecting border line opacity? Solutions I found does not help.

<div class="selected">
 <img
 src="../assets/img/image-product-1-thumbnail.jpg"
 alt="product-1-thumbnail"
 />
</div>

img {
 width: 100%;
 max-width: 5rem;
 height: auto;
 border-radius: 10%;
}

.selected {
    background-color: red;
    img {
        border: 2px solid red;
    }
}

CodePudding user response：

You should put the image in a div container with the size you want. Add the border and border-radius to the div, add opacity to the img element.

IMAGE CREDIT: https://www.pexels.com/@belle-co-99483

.img-container {
  width: 200px;
  height: 150px;
  border: 2px solid red;
  border-radius: 10%;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  opacity: .7;
}

.selected {
    //background-color: red;
}
img {
}

<div class="selected">
<div class="img-container">
   <img
   src="https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
   alt="product-1-thumbnail"
   />
 </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>