TransWikia.com

Почему теряется качество фоновой картинки?

Stack Overflow на русском Asked on January 27, 2021

Вставлю картинку png (1920×1080) в background и теряется качество картинки. Почему так происходит. Помогите исправить

.container{
background-image: url(images/background-photo.jpg);      
background-position: center center;      
background-repeat: no-repeat;      
background-attachment: fixed;      
background-size: cover;
}

One Answer

Кстати, cover лучше прописывать и для остальных, если что:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;

Есть решения другие - например,

  1. ставить бОльший размер.
  2. Использовать решения интерполяции (правда, поддержка еще не везде ахти)

    image-rendering: -moz-crisp-edges; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: crisp-edges; /* Стандартное свойство */
    
  3. Попробовать svg - правда, тут есть моменты...

  4. Попробовать, в комплексе, оптимизацию графики для Retina-экранов через соотношение между физическими и CSS-пикселями (device-pixel-ratio)

Конечно, в идеале, вообще-то, вектор и только вектор дает безграничные возможности масштабирования.

В общем, получается - нужно давать картинку нужного заведомо большего размера для большинства предполагаемых отображений/устройств.

Answered by Coder on January 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP