不影响边框的图像背景不透明度

Question

如何在不影响边框线不透明度的情况下设置不透明度背景？我找到的解决方案没有帮助。

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

Answer 1

您应该将图像放入您想要大小的 div 容器中。将 border 和 border-radius 添加到 div，将 opacity 添加到 img 元素。

图片来源：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>

不影响边框的图像背景不透明度

image background opacity with no affecting borders

html

css

sass