применить градиент на цвет фона - PullRequest
Новая
       61

применить градиент на цвет фона

0 голосов
/ 06 мая 2018

Мой background image должен охватывать весь фон моего сайта.

Здесь селектор тела в файле css: 

body {
    background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
}

При некоторых странных размерах экрана изображение не покрывает экран должным образом, и из-за опции «без повтора» «недостаточное изображение» выглядит белым.

Поэтому я добавил background-color: black в моем теле селектор, который работает как идеальный «запасной вариант». Фон, не покрытый изображением, теперь выглядит черным.

Теперь я бы хотел сделать переход между фоновым цветом и фоновым изображением более мягким, заменив простой «черный» градиентом. Но я не нашел решения.

Как бы я хотел, чтобы это было (не работает): 

body { 
    ...
    */apparently not a valid option for background-colour:*/
    background-color: linear-gradient(to right, rgb(1, 3, 0), rgb(26, 31, 38));
}

Ответы [ 3 ]

0 голосов
/ 06 мая 2018

Использование нескольких фонов должно помочь. Что-то в строках: 

body {
  background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg), linear-gradient(to right, rgb(1, 3, 0), rgb(26, 31, 38));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
}
0 голосов
/ 06 мая 2018

Если вы измените свой код html и добавите background к контейнеру вместо тела, тогда используйте псевдоклассы div::after, вы можете сделать это.

Проверьте этот код: 

body {
  margin: 0;
  padding: 0;
  background: black;
}

.main--container {
  background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  height: 90vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.main--container::after {
  display: block;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1));
  bottom: 0px;
  height: 140px;
  width: 100%;
  content: '';
}
<body>
  <div class="main--container">
  </div>
</body>
0 голосов
/ 06 мая 2018

Вы должны добавить это к своему телу: 

 min-width: 100% !important;
 min-height: vh !important;

Вам нужно добавить !important, если вы используете загрузчик.

...