WedX - журнал о программировании и компьютерных науках

Наложение поверх фонового изображения пропорционального размера

Я хочу показать цвет наложения поверх изображения пропорционального размера, используя содержимое background-size. Мой div-заполнитель правильно расширяется до высоты, но не до ширины:

.prop {
    background-image: url('https://via.placeholder.com/1600x1200');
    width:100vw;
    background-size: contain;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;  
    border: inset 70px transparent;
    box-sizing: border-box;
}

.placeholder {
  background:red;
  height:100%;
  opacity:0.5;
}
<div> 
  <div class="prop">
    
    <div class="placeholder"></div>
    
  </div>
 </div>

css
02.05.2018

  • Всегда ли пропорции/соотношение сторон фонового изображения одинаковы? Или подлежит изменению? 02.05.2018
  • да всегда одинаково - 4:3. 02.05.2018

Ответы:


1

Поскольку вы упомянули, что соотношение сторон изображения всегда будет 4:3 (например, 1600 1200), то есть довольно простое решение: все, что вам нужно, это дать .placeholder фоновое изображение с таким же соотношением сторон и расположить его. абсолютно относительно своего родителя .prop, и все готово.

Обновите свой код, добавив следующие дополнительные стили:

.prop {
    position: relative;
}

.placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 4 3"><rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Объяснение: здесь я использовал SVG размером 4 на 3 пикселя с элементом <rect>, установленным для заливки red и уменьшения непрозрачности заливки до 0.5:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 4 3">
    <rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect>
</svg>

Вы можете использовать эту разметку SVG как часть URI данных для свойства background-image. См. пример подтверждения концепции:

.prop {
  background-image: url('https://via.placeholder.com/1600x1200');
  width: 100vw;
  background-size: contain;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  border: inset 70px transparent;
  box-sizing: border-box;
  position: relative;
}

.placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 4 3"><rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
<div>
  <div class="prop">

    <div class="placeholder"></div>

  </div>
</div>

02.05.2018

2

Вы должны изменить background-size:contain на background-size:100% 100% вот так

    
        .prop {
        background-image: url('https://via.placeholder.com/1600x1200');
        background-size:100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        border: inset 70px transparent;
        box-sizing: border-box;
        }
    
.placeholder {
      background:red;
      height:100vh;
      opacity:0.5;
      width:100%;
        }
    
    
    
        <div> 
          <div class="prop">
            
            <div class="placeholder"></div>
            
          </div>
         </div>

02.05.2018
  • в то время как наложение теперь соответствует изображению - изображение больше не масштабируется пропорционально... 02.05.2018
  • Я только что сделал некоторые изменения, проверьте это сейчас 02.05.2018
  • изображение все еще искажается 02.05.2018
  • Я этого не вижу. ты тут пробовал?? 02.05.2018
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]