html - 为 bootstrap-vue 轮播图像添加背景颜色

Question

我正在尝试在我的幻灯片图像上添加一层滤色器。我正在使用 bootstrap-vue/webpack 进行展示网站开发。我的组件中的代码是：

HTML：

        <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#f85752"
                :interval="4000"
                img-width="1024"
                img-height="300"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
                class ="mycarousel"
    >
        <b-carousel-slide class="item">
            <img slot="img" class="d-block img-fluid w-100"
                 src="./images/amdufake012.jpg" alt="factory picture">
        </b-carousel-slide>
        <!-- slides with image -->
        <b-carousel-slide>
            <img slot="img" class="d-block img-fluid w-100"
                 src="./images/cargo_securing_airbag.jpg" alt="baggie">
        </b-carousel-slide>
    </b-carousel>

CSS：

img{
    background-color: #f85752;
}

我尝试使用这种方法在我的幻灯片图像顶部添加背景颜色。它不起作用。还有哪些其他方法可以做到这一点？

Answer 1

我建议不要将 直接添加background-colour到图像中，而是创建一个新的同级元素，并为其提供背景以及 position: absolute和opacity: 0.5。

.image-overlay {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #f85752;
  opacity: 0.5;
}

<b-carousel-slide>
  <div class="image-overlay"></div>
  <img src="http://placehold.it/100">
</b-carousel-slide>