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;
}
Кстати, cover лучше прописывать и для остальных, если что:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Есть решения другие - например,
Использовать решения интерполяции (правда, поддержка еще не везде ахти)
image-rendering: -moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor; /* IE */
image-rendering: crisp-edges; /* Стандартное свойство */
Попробовать svg - правда, тут есть моменты...
Попробовать, в комплексе, оптимизацию графики для Retina-экранов через соотношение между физическими и CSS-пикселями (device-pixel-ratio)
Конечно, в идеале, вообще-то, вектор и только вектор дает безграничные возможности масштабирования.
В общем, получается - нужно давать картинку нужного заведомо большего размера для большинства предполагаемых отображений/устройств.
Answered by Coder on January 27, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP