Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Фоновые изображения для экранов Retina с использованием свойства задания изображения

27 мая 2017 | Опубликовано в css | 10 Комментариев »

Хотя отображение изображений, относящихся к содержимому, на экранах высокого разрешения хорошо поддержано в HTML5 и CSS, включая новый элемент для больших изображений, а также атрибуты srcset и sizes, фоновым изображениям для экранов Retina почти не уделялось внимания, и для них не появлялось новых возможностей отображения. Так как фоновые изображения часто довольно большие и по разрешению и по размеру файла, это особенно неприятно. Хотя уже давно существовало посредственное решение, теперь есть и способ лучше. 

 

Способ с использованием @media

Изображение высокого разрешения может быть показано на подходящих экранах с помощью @media query, как мы рассказывали ранее, при необходимости, посмотрите подробности в этой статье. Воспользуемся следующим кодом для переключения между двумя изображениями, примененными к тегу body, — изображением с разрешением 72DPI, называющимся automobile.jpg, и версией высокого разрешения под названием automobile-2x:

 

body {
    background-image: url("automobile.jpg");
    background-size: cover;
}
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
    body {
        background-image: url("automobile-2x.jpg");
    }
}

Использование функции задания изображения

Более кратким и эффективным способом может быть использование функции задания изображения. Так как пока что она поддерживается только в браузерах на движке Webkit и в браузере Chrome, для ее использования нужна соответствующая приставка производителя:

body {
    background-image: url("automobile.jpg");
    background-image: -webkit-image-set(url("automobile.jpg") 1x, url("automobile-2x.jpg") 2x );
    background-size: cover;
}

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

Заключение

Использование функции задания изображения — это многообещающий способ для создания  качественных фоновых изображений для экранов Retina, но его применение требует тщательного обдумывания: можно или использовать уже привычный @media query, который работает во всех браузерах, или функцию задания изображения с обходным путем, который покажет изображение обычного разрешения во всех не поддерживающих эту функцию браузерах.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    dQLg3c pills2sale.com viagra online

    Ответить

  2. Razer22
    Thumb up Thumb down 0

    I'd like to open an account cephalexin buy online In a bid to weaken support for trade unions, which havehelped to scupper past attempts to sell off the business, thegovernment said it would give away 10 percent of shares in RoyalMail to its 150,000 UK postal workers, with the condition thatthey must be held for three years.

    Ответить

  3. Sydney
    Thumb up Thumb down 0

    Whereabouts are you from? best rx promotions RNC Chairman Reince Priebus wrote a letter to the heads of both networks to “express his deep disappointment” in their decision to either air a miniseries in NBC’s case or a movie in CNN’s, writing that the networks are “promoting former Secretary Hillary Clinton ahead of her likely candidacy for the Democratic nomination for president in 2016.

    Ответить

  4. Luciano
    Thumb up Thumb down 0

    Three years seroquel (quetiapine) hallucinations Boral shares were up 6.7 percent at A$5.07 at 2306 GMT,after hitting a 7-month high of A$5.12 earlier. USG sharesclosed down 1.3 percent at $27 on Wednesday. (Reporting By Maggie Lu Yueyang; Editing by Paul Tait)

    Ответить

  5. Harland
    Thumb up Thumb down 0

    Whereabouts in are you from? effexor increased anxiety reddit But college is not a car. One isn’t supposed to be more likely to pay off car payments after buying a car than she was before. Colleges — and especially for-profit colleges — predicate their entire purpose on that very idea. Higher education is supposed to transform the student, whether it be her mind, her resume, or both.

    Ответить

  6. Kirby
    Thumb up Thumb down 0

    Very Good Site naturade pea protein ICHAPURAM/BHUBANESWAR, India, Oct 12 (Reuters) — Rain andwind lashed India's east coast and nearly 400,000 people fled tostorm shelters after authorities issued a red alert and warnedof major damage when one of the largest cyclones the country hasever seen hits land later on Saturday.

    Ответить

  7. Aubrey
    Thumb up Thumb down 0

    Would you like to leave a message? adapalene benzoyl peroxide images The Justice Department and attorneys general from half a dozen states and the District of Columbia filed a lawsuit on Tuesday, arguing the hookup would hurt consumers by leading to higher airfares and less service.

    Ответить

  8. Efren
    Thumb up Thumb down 0

    It's a bad line derma viva reviews Community leaders say they understand the boxes are cheaper but they want a better plan that takes into account safety, access and maintenance. Township leaders and the postal service are holding talks over the boxes.

    Ответить

  9. bjuwzuu
    Thumb up Thumb down 0

    GSG6PP arqitgmltvxd, [url=http://royzzboobsgh.com/]royzzboobsgh[/url], [link=http://ajitlbumelzh.com/]ajitlbumelzh[/link], odbhaxkxrmmv.com

    Ответить

Оставить ответ


восемь − = 4

Вставить изображение