Градиент шириной 100% покрывает и связывает изображение шириной 50% и максимальной высотой 90% - PullRequest
Новая
       46

Градиент шириной 100% покрывает и связывает изображение шириной 50% и максимальной высотой 90%

0 голосов
/ 29 сентября 2018

Я ужасен в HTML / CSS, и я совершенно ошеломлен этим.

Требования к изображению:

  • Расположен в правом нижнем углу
    • Небольшое расстояние справа (right: 2%; или аналогичное)
    • Нижняя часть изображения заподлицо с нижней частью окна
  • Макс. Высота 95% окна
  • Макс. Ширина 50% окна

Другими словами, изображение НЕ ДОЛЖНО превышать половину ширины любого окна или более 95% высоты окна.Лишнее пространство над или по бокам отлично.

Требования к градиенту:

  • Прозрачный сверху вниз до синего цвета (background: linear-gradient( to bottom, transparent 0, blue 100%);)
  • Размещено поверх изображения (z-index: 1;)
  • Ширина 100% окна всегда
  • Высота СООТВЕТСТВУЕТ изображению, чтобы точно покрыть его по высоте (т.е. градиент должен покрывать
    • Другими словами, градиент должен окрашивать изображение одинакового оттенка на каждой высоте равномерно по ВСЕМ пропорциям и размерам экрана

РЕДАКТИРОВАТЬ.1042 *

  • Нет переполнения или прокрутки. Изображение, деления и градиент должны полностью отображаться на экране. Изображение никогда не скрывается частично, и полосы прокрутки не должны появляться.

Примеры (но ...):

Я не знаю, почему jsfiddle и codepen неправильно позиционируются ниже. По крайней мере, позиционирование работает в моем локальном коде: этолучшее, что я мог сделать сейчас:

https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/

https://codepen.io/stevenmchoi/pen/qJENmj

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Вы ищете что-то вроде следующего? 

.parent-div {
  position: relative;
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, red);
  overflow: hidden;
}

.monokuma-img {
  position: absolute;
  max-width: 50%;
  max-height: 95%;
  right: 2%;
  bottom: 0px;
}

.despair-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: linear-gradient( to bottom, transparent 75%, #1543E9 100%);
}
<div class="parent-div">
  <div class="despair-div">
    <img class="monokuma-img" src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="" />
  </div>
  <div class="despair-gradient"></div>
</div>
0 голосов
/ 29 сентября 2018

Попробуйте это

.parent{
  background: linear-gradient( to bottom, transparent 0, blue 100%);
  height: 100vh;
}
.parent .img-container{
   width: 50vw;
   height: 95vh;
}
.parent .img-container img {
  position: fixed;
  right:2%;
  bottom:0px;
  z-index: -1;

}
<div class="parent">
      <div class="img-container">
        <img src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="">
      </div>
    </div>
...