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

Question

Я пытаюсь установить центр изображения на экране, и размер изображения не такой большой, как весь экран.Как сделать фоновый цвет частью изображения?Таким образом, создавая иллюзию, что изображение является полноэкранным?

Я попытался использовать цвет изображения и установить его как часть цвета фона, но он все еще не соответствует.

html

  <section class="container">
    <img class="bg-img" src="../assets/beauty-bg-img.jpg" alt="background image">
  </section>

css

.container {
    background-color: #F3D5DB;
}

Как видно, изображение центрировано, но цвет изображения и фона не идут рука об руку.

Как это можно сделать?

Изображение

Answer 1

Есть несколько способов сделать это.

Вы можете установить изображение в качестве фона на теле или в div-обертке, и использовать для свойства background-size значение cover.

Или, вы можете создать отдельный div в верхней части вашего кода, сделать его position:fixed;top:0;left:0;width:100vw;height:100vh; (устанавливает изображение в полный размер области просмотра) и z-index:-1 (местамиэто под другими делами) .Это хороший эффект, потому что вы также можете добавить opacity:0.5 или что-то подобное, чтобы немного «затемнить» изображение, а остальная часть вашей веб-страницы накладывается на изображение.

Вот несколько хороших статей о том, что выможно сделать:

https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

https://www.smashingmagazine.com/2009/03/backgrounds-in-web-design-examples-and-best-practices-2/

https://css -tricks.com / perfect-full-page-background-image-image /

https://www.webfx.com/blog/web-design/responsive-background-image/

https://www.taniarascia.com/background-position-fixed-and-cover-with-css/

Answer 2

Цвет вашего фона сплошной, но у выбранного вами изображения очень слабый градиент.Чтобы увидеть это, посмотрите на верхнюю и нижнюю часть изображения, чтобы увидеть это.Изображение светлее фона наверху и темнее внизу экрана.

Это можно исправить с помощью градиентов , но для этого потребуется немало проб и ошибок.