CODEWITHSUNDEEP
htmlcssvuejs2bootstrap-4bootstrap-vue
dlfjj
dlfjj

Reputation: 349

Add background color for bootstrap-vue carousel image

I am trying to add a layer of color filter on top of my slideshow images. I am using the bootstrap-vue/webpack for my showcase website development. The code within my components is:

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

I try to this method to add background color on top of my slideshow image. It doesn't work. What are the other ways to do it?

Upvotes: 1

Views: 2507

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Instead of adding the background-colour to the image directly, I recommend creating a new sibling element, and giving that the background, along with position: absolute and 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>

Upvotes: 1

Related Questions