Как сделать фоновое изображение прозрачным, градиентным?

Question

У меня есть background-image на моем теле, настроено повторять, чтобы оно покрывало всю страницу как бесконечный фон, независимо от длины страницы.

Я бы хотел, чтобы это исчезлопоказывать заданный по умолчанию фон (простой белый) примерно на полпути вниз по окну при первой загрузке страницы, так что это больше похоже на фон баннера.

Я нашел предыдущие вопросы, подобные этому: Fadeизображение становится прозрачным, как градиент , подробно описывающий, как затухать элемент img, расположенный за другим содержимым.

Но я специально спрашиваю, как затушевывать background-image, примененный с помощью CSS, а не img элемент.Возможно ли это?

---

Вот пример эффекта, который я желаю (путем редактирования изображения непосредственно в программном обеспечении для работы с изображениями): https://travamigos.com/about-us/

Answer 1

Это невозможно с помощью CSS, так как оно стоит как фон images не может быть затронуто opacity.

Однако вы можете наложить фон изображения bg на градиент фона с помощьюнепрозрачность, но она должна заканчиваться определенным цветом, в вашем случае white.

body {
  min-height: 100vh;
  background-image: linear-gradient(transparent, white 75%), url(http://www.fillmurray.com/460/300);
}