HTML и CSS: серый наложенный фон на полностью адаптивное изображение с текстом - PullRequest
Новая
       7

HTML и CSS: серый наложенный фон на полностью адаптивное изображение с текстом

0 голосов
/ 21 декабря 2018

Я новичок в HTML и CSS и пытаюсь решить эту домашнюю задачу:

Отобразите вышеупомянутое полное адаптивное изображение с серым наложенным фоном поверх изображения, и текст должен появиться в середине полногопросмотр экрана путем написания кода в HTML и CSS.Есть два изображения, одно меньшее для мобильного, которое отражается элементом <picture> в HTML.

Я собрал воедино совет от W3, здесь и в других местах, но не могу понять, как подогнать оверлей к размеру изображения, чтобы он не переполнялся (в настоящее время переполняется как справа, так и слева в полном размере браузера, но может видетьщепка, не наложенная на правую сторону, когда я уменьшаю окно браузера).
Вот полный код на codepen: https://codepen.io/nyck33/pen/oJZjYx

Отредактировано, чтобы отразить предложения в данном ответе:

HTML: 

<div class="container">
  <div id="wrapper">
    <div class="overlay"></div>
        <picture>
            <source srcset="meBroken.jpg" media="(max-width: 600px)">
            <source srcset="macho.jpg" media="(max-width: 1500px)">
            <source srcset="meDad.jpg">
            <img src="macho.jpg" alt="macho men" style="width:auto;">
        </picture>
    <div class="centered">
        <p1 style="font-size:7vw">
            <font color="red">ACCELERATE</font> 
            <font color="white"><b>YOUR CAREER</b></font>
        </p1>
    </div>
  </div>    
</div>

CSS: 

#wrapper {
    position: relative;
}
.overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

Ожидаемый результат заключается в том, что размер наложения соответствует размеру изображения для двух разных изображений (одно для ПК, другое для мобильных устройств)без и переполнения / недостаточного заполнения.

Снимки экрана:

PC size image

mobile size image

Изображение мобильного размера выглядит как наложение, но с большим размером ПК оно по-прежнему переполняется, хотя я сделал overlay прямым потомком wrapper

1 Ответ

0 голосов
/ 21 декабря 2018

Из-за того, что вы положили overlay div как прямой дочерний элемент container и задали его абсолютное положение. Это не будет зависеть от элемента wrapper

Это будет зависеть отЭлемент container, если для его свойства position установлено значение относительное. 

<div class="container">
    <div id="wrapper">
        <div class="overlay"></div>
        <picture>
            ... <!-- All content of your picture tag goes here -->
        </picture>
    </div>
</div>

Вы можете использовать приведенный выше код, который сделает overlay позицией над элементом wrapper из-затот факт, что он установлен относительно и overlay является прямым потомком wrapper

.wrapper {
    position: relative;
    /** other css properties goes here */
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
...