Добавить цвет фона для изображения начальной загрузки - PullRequest
Новая
       28

Добавить цвет фона для изображения начальной загрузки

0 голосов
/ 29 июня 2018

Я пытаюсь добавить слой цветного фильтра поверх моих слайд-шоу изображений. Я использую 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;
}

Я пытаюсь этим методом добавить цвет фона поверх моего слайд-шоу изображения. Не работает Каковы другие способы сделать это?

1 Ответ

0 голосов
/ 29 июня 2018

Вместо того, чтобы добавлять 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>
...