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>

为Bootstrap-Vue轮播图片添加背景颜色

1 个答案: