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

Я хочу показать цвет наложения поверх изображения пропорционального размера, используя содержимое 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

Ответы:

Поскольку вы упомянули, что соотношение сторон изображения всегда будет 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

Вы должны изменить 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 для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning