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

【问题标题】：image background opacity with no affecting borders不影响边框的图像背景不透明度
【发布时间】：2021-11-26 18:44:59
【问题描述】：

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

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

【问题讨论】：

标签： html css sass

【解决方案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>

【讨论】：

但如果我输入img { opacity: .7 }，那么所有图像的不透明度都是相同的。我只想选择一个。怎么办？
也许你应该创建一个opacity 类，从图像样式中删除不透明度。检查if statement 所选图像并向其添加不透明度类（您仍然可以使用内联样式）。