Фоновите изображения за Retina се показват, като се използва свойството Image Specification

27 май 2017 г. | Публикувано в css | 1 коментар "

Докато показването на свързани със съдържанието изображения на екрани с висока разделителна способност се поддържа добре в HTML5 и CSS, включително нов елемент за големи изображения и атрибутите srcset и размери, фоновите изображения за екраните на Retina са получили малко внимание или нови функции. . Тъй като фоновите изображения често са доста големи както в разделителна способност, така и в размер на файла, това е особено разочароващо. Въпреки че отдавна съществува посредствено решение, сега има по-добър начин.

Метод, използващ @media

Изображението с висока разделителна способност може да се покаже на подходящи екрани с помощта на @media заявка, както обсъдихме по-рано, ако е необходимо, вижте тази статия за подробности. Нека използваме следния код, за да превключваме между две изображения, приложени към маркера на тялото, изображение от 72 DPI, наречено automobile.jpg, и версия с висока разделителна способност, наречена automobile-2x:

---