Image html background no repeat: background-repeat | htmlbook.ru

Давайте посмотрим на другой пример.

Обратите внимание, что изображение puppy.png будет первым элементом в списке, разделенном запятыми. Это изображение, которое мы хотим наложить на поверх всех остальных изображений в списке.

Объединяя два:

body {background: url (‘puppy.png’), url (‘pattern.png’)

Мы получаем следующий результат:

Другие свойства фона, которые также принимают запятых. разделенных списков существует .Практически все остальные свойства, связанные с фоном, кроме background-color .

Таким же образом вы можете указать другие параметры для каждого отдельного фона, используя другие свойства фона, показанные ниже:

background
background-attachment
background-clip
background-image
background-origin
background-position
background-repeat
background-size

Следующее свойство нельзя использовать со списком по очевидным причинам:

background-color

Что бы означало предоставить несколько значений цвета для фона? Каждый раз, когда задано свойство цвета фона, обычно вся область заполняется сплошным цветом .Но для нескольких фонов требуется, чтобы хотя бы один из фонов содержал какую-то прозрачность. Следовательно, его нельзя использовать в случае нескольких фонов для каких-либо значимых целей.

Это все, что вы можете сказать о фонах HTML.

Я уверен, что пропустил какой-то нестандартный вариант использования или допустил другие ошибки. Если увидите что-нибудь, дайте мне знать.

Поздравляю. Теперь у вас есть несколько идей об использовании фоновых изображений в CSS .Вы можете подписаться на меня на GitHub — Я подпишусь на меня!

Эта статья была спонсирована издателем литературы по программному обеспечению Learning Curve .

Спасибо за чтение 🙂

Повторение фона — Tailwind CSS

Повторить

Используйте bg-repeat , чтобы повторить фоновое изображение как по вертикали, так и по горизонтали.

Без повтора

Используйте bg-no-repeat , если вы не хотите повторять фоновое изображение.

Повторить по горизонтали

Используйте bg-repeat-x , чтобы повторить фоновое изображение только по горизонтали.

Повторить по вертикали

Используйте bg-repeat-y , чтобы повторить фоновое изображение только по вертикали.

Адаптивный

Чтобы контролировать повторение фонового изображения элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите повторения фона.Например, добавление класса md: bg-repeat-x к элементу приведет к применению утилиты bg-repeat-x при средних размерах экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

По умолчанию для утилит фонового повтора создаются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит фонового повтора, изменив свойство backgroundRepeat в разделе вариантов вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ backgroundRepeat: ['hover', 'focus'],
      }
    }
  }  

Если вы не планируете использовать утилиты фонового повтора в своем проекте, вы можете полностью отключить их, установив для свойства backgroundRepeat значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ backgroundRepeat: false,
    }
  }  

Использование фоновых изображений CSS · Документы WebPlatform

Сводка

В этой статье подробно рассматриваются фоны CSS: цвет фона, изображение, повторение, вложение и положение. Ближе к концу он также рассматривает передовые методы, такие как спрайты CSS.

Введение

Признайся! С момента появления первой статьи в учебной программе по веб-стандартам вы были взволнованы, узнав, как сделать свой сайт ярким и потрясающим.Может быть, вы даже перешли к этому разделу?

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

Как вы ранее узнали из предыдущей статьи в этой серии, одним из наиболее важных изменений, которые происходят с CSS, является возможность отделить представление , , или то, как все выглядит, от семантики или того, что означают вещи. Фоновое изображение CSS является одним из наиболее важных инструментов, имеющихся в вашем распоряжении, поскольку оно позволяет применять декоративные изображения к определенным частям вашего HTML, не добавляя лишнего веса вашему HTML.Раньше авторы (как и вы!) Были вынуждены заполнять свой код тегами img для достижения того же эффекта.

CSS и, в частности, свойство background предохраняют ваш HTML от презентационного беспорядка. Редизайн и другие изменения в жизни сайтов, построенных с использованием современных методов, могут быть выполнены гораздо более эффективно. Вы можете обновить свой сайт, изменив только таблицу стилей, вместо того, чтобы перекодировать каждую HTML-страницу. В зависимости от размера вашего сайта это может существенно сэкономить время.

Из этой статьи вы узнаете основы работы фоновых изображений CSS. Вы увидите, как применить фоновое изображение с помощью CSS, настроить его размещение, расположить мозаику по вертикали или горизонтали и объединить фоновые изображения с помощью CSS-спрайтов для повышения производительности сайта.

Как это работает?

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

Во-первых, просмотрите различные свойства, которые вы можете использовать.

Свойства фона

Создание предупреждающего сообщения

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

Конструкция

Представьте, что графический дизайнер предоставил визуальный макет предупреждающего сообщения, которое вы хотите создать для своего веб-сайта. Предупреждение имеет светло-оранжевый цвет фона, чтобы выделяться на фоне окружающих абзацев.Он также имеет значок предупреждения в десяти пикселях от верхнего левого угла.

Обратите внимание, что в макете есть одна строка текста, но в будущем она может содержать больше. Один из самых важных навыков веб-разработчика — предвидеть, как будет развиваться дизайн. Часть уважения к художественному видению сайта — это постоянство от запуска до редизайна. Таким образом, предупреждающее сообщение может содержать более одной строки текста или даже несколько абзацев, списков или других элементов HTML. Стремитесь быть как можно более элементарным агностиком.Это увеличит вероятность повторного использования кода и позволит вам настроить сайт так, чтобы он был максимально быстрым и эффективным. Макет выглядит, как на Рисунке 1.

Рис. 1. Макет окна с предупреждением, созданный графическим дизайнером.

Разработчик также предоставил значок, который мы должны использовать, как показано на рисунке 2.

Рисунок 2: Значок предупреждения.

Код

Основываясь на том, что вы узнали о фонах CSS в первой части этой статьи, вы, возможно, уже представляете, как создать это предупреждающее сообщение.Я рекомендую вам попробовать создать его сейчас, а затем сравнить свою работу с приведенным ниже примером.

После создания окна предупреждений следуйте пошаговым инструкциям, приведенным ниже. Каждый снимок экрана содержит ссылки на примеры кода, поэтому вы можете проверять исходный файл на каждом этапе. Поэкспериментируйте с кодом, увеличивая или уменьшая значения, и попробуйте альтернативы. Вы также можете продолжить, написав каждую новую строку кода в таком инструменте, как Opera Dragonfly или Firefox Firebug, чтобы вы могли сразу увидеть результаты каждого шага.

Создание ловушки или селектора CSS.

Сначала вам нужно создать оповещение класса , которое позволит вам подключить код CSS. Создайте новые файлы скелетов CSS и HTML, свяжите таблицу стилей CSS с файлом HTML и добавьте в каждый из них следующий код:

Скопируйте следующий CSS и вставьте его в таблицу стилей:

  .alert {...}
  

Скопируйте следующий HTML-код и вставьте его в HTML-документ:

  

   Внимание!  Здесь находится текст нашего предупреждающего сообщения.
  

Приведенный выше код задает для оповещения класс , а не id , потому что это позволяет иметь более одного оповещения на странице. Например, вы можете добавить предупреждения к элементу формы с несколькими потенциальными ошибками. Цель состоит в том, чтобы сделать ваш CSS как можно более гибким и ограничить элементы в соответствии с дизайном при создании содержимого HTML.

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

Примечание. Я намеренно выбрал , а не , чтобы ограничить предупреждение класса параграфами; окна предупреждений могут легко содержать и другие элементы. Вы должны оставить как можно больше гибкости в своем CSS.

Добавление цвета фона

Вы уже узнали об использовании цвета фона при обработке текста в Стилизация текста с помощью CSS . Те же принципы применимы к любому элементу HTML и могут быть объединены с фоновыми изображениями для создания визуальных эффектов.Если цвет фона не задан и не унаследован, он по умолчанию прозрачный.

Как показано ниже, вы можете добавить светло-оранжевый цвет фона к окну предупреждения, чтобы выделить его среди текста вокруг него. Важно не делать цвет фона слишком темным, потому что вам нужно поддерживать разумный уровень контраста между текстом и цветом фона. Добавьте в правило CSS следующее свойство:

  .alert {
  цвет фона: #FFFFCC;
}
  

Окно предупреждения теперь выглядит так, как показано на рисунке 3.

Рисунок 3: Окно предупреждения с добавленным цветом фона.

Применение фонового изображения

Затем вы можете добавить фоновое изображение к предупреждению. Путь к фоновому изображению должен быть заключен в url ​​() , как показано в приведенном ниже коде. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;

  
  фоновое изображение: URL (alert.png);
}
  

Окно предупреждения теперь выглядит, как на Рисунке 4.

Рисунок 4: Фоновое изображение было добавлено, но мозаика выглядит неправильно.

Помните, что каждое свойство фона имеет значение по умолчанию - если вы не указали значение, будет применено значение по умолчанию. Обратите внимание, что изображение покрывает все предупреждение, как мозаика на полу кухни. Какой вывод? По умолчанию фоновые изображения повторяются как по горизонтали, так и по вертикали. Повторяющийся фон особенно полезен для градиентов и узоров, заполняющих экран или конкретный элемент HTML, но в данном случае этот эффект , а не .

Контроль повторения фона

Рис. 5. Как и фоновое изображение, эти плитки повторяются как по горизонтали, так и по вертикали.

Чтение спецификаций, конечно, может быть пугающим, но спецификация - действительно хорошее место, чтобы выяснить, как должен работать CSS , прежде чем углубляться в бесчисленное множество различий между браузерами. Прочтите часть спецификации W3C, посвященную цветам и фону, и попытайтесь найти ключевое слово, которое будет использоваться, когда вы не хотите, чтобы фоновое изображение повторялось.Эта стратегия используется в примере ниже:

Обратите внимание, что есть раздел для каждого свойства фона, включая повторение фона. В поле Value отображаются все возможные варианты, включая: repeat , repeat-x , repeat-y , без повтора и наследуют . По умолчанию ( начальных ) фоновые изображения настроены на повтор. Направление не указано, что означает, что изображение будет мозаичным как по горизонтали, так и по вертикали.Вы, вероятно, догадались, что no-repeat - это значение, которое нужно установить для предотвращения мозаичного изображения в любом направлении. Добавьте следующую выделенную строку ниже в правило CSS:

  .alert {
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);

  
  фон-повтор: без повторения;
}
  

Окно предупреждения теперь выглядит, как на Рисунке 6.

Рисунок 6: Окно предупреждения с единственной копией фонового изображения (без мозаики).

Кроме того, вы можете выбрать повторение в обоих направлениях (например, кухонная плитка) или в любом направлении. Градиенты часто повторяются по горизонтали или вертикали (см. Рисунок 7). Вам не нужно знать размер HTML-элемента; вы просто вырезаете часть своего градиента и настраиваете его повторение в желаемом направлении; либо x для горизонтали, либо y для вертикали. Узоры часто повторяются в обоих направлениях, а значки обычно не повторяются. Вы изучите background-repeat далее в следующем примере.

Рис. 7. Зеленовато-желтые плитки в этом примере повторяются только по горизонтали.

Затем взгляните на практический пример с моего веб-сайта. Рисунок 8.

Рисунок 8: Повторяющийся пример с моего веб-сайта.

CSS, который я использовал для добавления этого декоративного эффекта, относительно прост. Я сделал фоновый повтор по горизонтали, используя repeat-x :

.

  кузов {
    
    фон-повтор: повтор-х;
  }
  

Приложение

Атрибут вложения позволяет указать, как будет вести себя фон, когда пользователь прокручивает страницу вниз.Поведение по умолчанию - scroll , при котором фоновое изображение прокручивается вместе с содержимым.

С другой стороны, установка background-attachment на fixed приводит к тому, что элемент застревает в окне браузера, поэтому он остается на том же месте при прокрутке содержимого внутри элемента, к которому он прикреплен. Это создает некоторые странные эффекты, которые будут очевидны только при прокрутке прикрепленного HTML-элемента. W3C использует его для обозначения статуса своих спецификаций.Например, изображение «Рекомендация кандидата W3C» вверху слева. Прокрутите страницу вниз и обратите внимание, что изображение остается вверху слева. Он прикреплен к элементу body , поэтому всегда виден.

Этот шаг не повлияет на наш дисплей, потому что браузеры по умолчанию устанавливают фоновые изображения для прокрутки, но все равно добавляют это в код, чтобы узнать, как используется свойство. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;
  background-image: url (alert.png);
  фон-повтор: без повторения;

  
  вложение фона: прокрутка;
}
  

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

Рисунок 9: Дисплей не изменился.

Размещение изображения

Позиционирование - это точная настройка, которая позволяет размещать фоновые изображения именно там, где нужно, как по горизонтали, так и по вертикали внутри элемента HTML. Это свойство принимает ключевые слова и числовые значения, такие как top , center , right , 100% , -10% , 50px и -30em .

На рисунке 10 показаны значения, которые вы можете использовать для размещения фоновых изображений в разных положениях.

Рисунок 10: Различные примеры положения фона с использованием ключевых слов, процентов и пикселей.

Приведенный ниже код позиционирует фоновое изображение. Цель состоит в том, чтобы расположить его в верхнем левом углу, но не касаться сторон, поэтому вам нужно сместить его на 10 пикселей как сверху, так и слева. Это достигается путем добавления следующей выделенной строки в правило CSS:

 .тревога{
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);
  фон-повтор: без повторения;
  вложение фона: прокрутка;

  
  background-position: 10px 10px;
}
  

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

Рисунок 11: Использование CSS-позиционирования для установки местоположения фонового изображения.

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

Использование сокращений, чтобы собрать все вместе, как профессионал

Как вы узнали, определенные свойства CSS можно сгруппировать. Фон и все его подсвойства можно сгруппировать в правилах CSS. Код CSS, описанный до сих пор, можно переписать в сокращенной форме следующим образом:

 .тревога{
    
    фон: #FFFFCC url (alert.png) прокрутка без повтора 10px 10px;
  }
  

Совет: при группировании подсвойств фона всегда располагайте свойства в следующем порядке. Это важно как для кроссбраузерной совместимости, так и для организации и обслуживания таблиц стилей:

1. цвет
2. изображение
3. повтор
4. приставка
5. горизонтально позиция
6. вертикальное положение

Попробуйте заменить старый код CSS в своем документе сокращением, показанным выше.После обновления пример должен выглядеть точно так же (см. Рисунок 12).

Рисунок 12: Сокращение работает как шарм!

Экспериментируя с кодом

Лучший способ запомнить все нюансы CSS - это проверить параметры самостоятельно. Попробуйте изменить некоторые свойства в примере и посмотрите, как разные значения влияют на отображение. Установите background-position на 100% 100% и обратите внимание, что это дает тот же результат, что и использование ключевых слов right и bottom .А если вы измените его на -5px 0 ? Как вы думаете, почему часть изображения скрыта?

Контроль качества

Тестирование чрезвычайно важно для обеспечения хорошего взаимодействия с пользователем. Тот факт, что сайт хорошо выглядит на вашем компьютере с вашей конкретной конфигурацией, не означает, что он будет хорошо выглядеть в каждом браузере. При тестировании окна предупреждений выполните следующие основные минимальные шаги:

• Увеличьте или уменьшите количество текста внутри предупреждения.
• Увеличьте размер текста в браузере как минимум на два уровня.Определите, лучше ли использовать em для позиционирования нашего изображения. Проверьте, что происходит, когда вы увеличиваете размер текста.
• Примените предупреждение класса к другим элементам, таким как div , p , ul , strong или em . Как можно изменить код, чтобы сделать класс независимым?
• Включите несколько абзацев и список в предупреждение div . Код все еще работает?
• Визуально проверьте предупреждение в браузерах уровня 1 (также известных как браузеры уровня A).Мой совет - написать код для хороших браузеров, а затем адаптировать его для Internet Explorer - когда код заработает.

Строгое тестирование - это часть обучения написанию CSS. Чем внимательнее вы будете учиться, тем быстрее сможете писать код.

Спрайты

Пользователи хотят все. Они хотят, чтобы ваш сайт был гламурным, интерактивным и быстрым. Однако включение большого количества фоновых изображений CSS может значительно замедлить работу вашего сайта. Чем больше HTTP-запросов вы сделаете, тем медленнее будет работать ваш сайт (HTTP-запрос возникает всякий раз, когда ваш компьютер обращается к веб-сайту, и ему необходимо попросить сервер отправить ему другой ресурс в дизайне сайта, такой как файл CSS или изображение ... каждый дополнительный запрос означает более длительное время загрузки сайта).

Чтобы обойти это ограничение, вы можете объединить связанные значки в одно изображение, известное как CSS-спрайты. Свойство background-position позволяет затем разместить изображение в соответствующих положениях, чтобы значки отображались через окно элемента HTML, к которому прикреплены спрайты CSS.

Обратите внимание на рис. 13, что для отображения значка Земли в окне HTML вы можете разместить изображение, используя слева вверху . Чтобы переместить изображение таким образом, чтобы отображался значок предупреждения, положение фона необходимо изменить на -80 пикселей 0 .Отрицательное значение по горизонтали смещает изображение влево.

Рисунок 13: Использование CSS-спрайтов для уменьшения количества HTTP-запросов.

Примечание. Если вы установите отрицательное положение фона, Safari будет повторять ваше изображение, даже если вы указали no-repeat . Это необходимо учитывать, когда вы начинаете работать с фоновыми изображениями для создания более сложных макетов.

Пример сложного спрайта и фонового изображения

Затем посмотрите, как можно использовать спрайты CSS.Предположим, дружелюбный дизайнер прислал нам новый макет. Это иллюстрирует список ссылок на целевой странице блога. Он указывает на профиль блоггеров в LinkedIn, RSS-канал, фотографии Flickr и закладки. При оценке каждой ссылки обратите внимание на градиент, начинающийся в центре с белого цвета и переходящий к серому вверху и внизу ссылки. И чтобы еще больше усложнить ситуацию, дизайнер спросил, можем ли мы сделать каждую ссылку простой белой без кривой, когда посетители наводят курсор на ссылку, как показано на рисунке 14.

Рисунок 14: Макет нового дизайна.

Логотипы могут быть включены с использованием элементов img в разметке. Однако использование CSS-спрайтов - гораздо лучшее решение. Спрайты загружаются быстрее, потому что должно загружаться только одно изображение (а не четыре), и он освобождает ваш HTML от разметки за счет уменьшения объема необходимой разметки.

Создание спрайта

Первый шаг включает вырезание четырех логотипов и создание набора спрайтов, как показано на рисунке 15.

Рисунок 15: Набор спрайтов.

Также необходимо вырезать часть градиента шириной 1 пиксель. Для наглядности я вырезал немного больший фрагмент, но в реальном проекте сайта вам понадобится только изображение в один пиксель (см. Рисунок 16).

Рисунок 16: Срез, используемый для градиентного фона.

HTML-код, который создает список, представляет собой неупорядоченный список, содержащий ссылки. Обратите внимание на пустые , охватывающие элементов внутри ссылок. Очень важно не иметь фиксированных по высоте и по ширине для элементов, содержащих текст.В конце концов, вы не представляете, насколько большим будет текст. Что будет, если сайт переведут на немецкий язык? Вы можете использовать эти дополнительные промежутки для отображения логотипов. В качестве альтернативы вы можете решить, что не хотите, чтобы посторонняя несемантическая разметка загромождала ваш HTML. В этом случае вам нужно будет использовать спрайт большего размера и оставить пробел между значками. Имейте в виду, что эта стратегия медленнее для пользователей с медленным подключением, особенно для тех, кто использует мобильные телефоны для просмотра сайта. Код для списка показан ниже.Скопируйте его, а затем вставьте в документ HTML:

  

    

       Резюме 
    
    

       RSS-канал 
    
    

       Фотографии 
    
    

       Ссылки 
    
  
  

Добавьте следующий CSS-код в новый CSS-файл и свяжите его с HTML-документом:

 .навигация, .navigation li {
  маржа: 0;
  отступ: 0;
}

.navigation li {
  border-top: сплошной белый 1px;
  тип-стиль-список: нет;
}

.navigation li a {
  фон: # E2E2E2 url (sprite_gradient_bkg.jpg) repeat-x левый центр;
  отступ: 20 пикселей;
  дисплей: блок;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  цвет: # 333;
  размер шрифта: 18 пикселей;
  текстовое оформление: нет;
}



.navigation li a: hover, .navigation li a: focus {
  фон: прозрачный - нет;
}
  

CSS использует оба фоновых изображения.Во-первых, взгляните на фоновое изображение градиента. Следует отметить три интересных момента:

1. Изображение повторяется по горизонтали ( повтор-x ). Эта мозаика позволяет вам сделать такое маленькое изображение растянутым по всему списку.
2. Изображение центрируется по вертикали. Вы хотите, чтобы круглая часть изображения появлялась в середине элемента списка, поэтому вы должны использовать позицию фона слева по центру .
3. В CSS я применил цвет фона того же серого, что и серый на градиентном изображении.Это гарантирует, что если элемент вырастет, он не будет выглядеть сломанным. Для получения дополнительной информации об этой технике я рекомендую прочитать Bulletproof Web Design Дэна Седерхольма.

Последняя строка означает, что элемент не должен отображать цвет фона или изображение, когда посетитель наводит на него курсор или фокусируется на элементе с помощью клавиатуры. Вам может быть интересно, почему я применил свойства фона к ссылке, а не к элементу списка. Ответ заключается в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдоклассы, такие как hover , для элементов, отличных от ссылок.Я внес изменения в код, чтобы учесть это ограничение.

Затем вы можете создать CSS для маленьких логотипов. Как обычно, вы можете начать с определения наиболее общего случая для всех элементов span в вашем навигационном модуле. Именно здесь вы определяете изображение, которое будет использоваться для всех промежутков, настройку повтора и положение фона (каждое из них отличается, поэтому вы можете использовать первое). Вы можете использовать сокращенное обозначение этого правила. Обратите внимание, что комментарии CSS делят разделы нашего кода на управляемые фрагменты.Добавьте следующий код в конец файла CSS:

 

.navigation span {
  фон: url (sprite_logo.gif) без повтора слева вверху;
  высота: 15 пикселей;
  ширина: 15 пикселей;
  поле справа: 20 пикселей;
  дисплей: -moz-inline-box;
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}
  

После завершения базового форматирования теперь вы можете определить исключения, или , что отличает от каждого конкретного логотипа. В этом случае изменяется только CSS background-position .Для каждого соответствующего элемента списка необходимо, чтобы изображение было перемещено на 15 пикселей влево, потому что каждое из изображений логотипа имеет ширину 15 пикселей. Добавьте в конец файла CSS следующее:

 

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}
  

Этот пример поначалу может показаться устрашающим. Сосредоточьтесь на фоновых изображениях. В этом случае при использовании отрицательного значения пикселя фоновое изображение смещается влево, так что отображается соответствующая часть изображения.Положительные значения перемещают фоновое изображение вниз и вправо, а отрицательные значения перемещают изображение вверх и влево.

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

Использование

  10.02.2014 около 1500 центральное время:
  

hoffmant99 внес незначительные изменения, чтобы пример спрайта работал, хотя учащийся (читатель этой страницы) должен знать, что имена файлов не совпадают.Это можно исправить локально, изменив имя с «sprite_logo» на «sprite_l» и «sprite_gradient_bkg.jpg» на sprite_g.jpg ».

См. Также

Внешние ресурсы

Изображение предоставлено

Вопросы к упражнению

• Размер абзаца составляет 40 на 180 пикселей, а размер фонового изображения - 60 на 200 пикселей. Вы увидите изображение целиком или только его часть? Почему?

• Вы хотите, чтобы изображение располагалось в нижнем левом углу элемента blockquote - введите правильные значения.

    blockquote {background: yellow url (quote.png) no-repeat scroll ____ ____;}
    

• Допустим, вы хотите, чтобы к каждому h3 в вашем документе был применен градиентный узор с классом «вопрос». Вы бы использовали repeat-x , repeat-y , no-repeat или repeat для достижения чего-то похожего на пример ниже? Почему?

• Каким будет фоновая позиция примера в вопросе номер 3? Как можно творчески использовать цвет фона, чтобы он мог расширяться до любой высоты? Почему это важно?
• Какое сокращение можно использовать для удаления всех свойств фона?
• Какова цель CSS-спрайтов?

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

Включены все исправления для фоновых изображений, включая Outlook, Windows 10, Webkit и приложение Gmail, отличное от учетной записи Gmail (GANGA).

В Action Rocket мы следим за всеми последними хитростями и исправлениями, чтобы наши клиенты получали лучшие электронные письма. Фоновые изображения могут создать отличные эффекты в дизайне электронной почты и действительно оживить его.

Они действительно вызывают некоторые головные боли - Outlook 2007, 2010, 2013 все нуждаются в языке векторной разметки (VML) для правильного отображения изображения, поскольку они используют механизм рендеринга Microsoft Word. Windows 10 также имеет аналогичные особенности, но требует даже больше информации, чем предыдущие прогнозы, в основном ширина и высота указываются в точках (pt), а не в пикселях.Электронная почта Webkit и подавляющее большинство современных почтовых клиентов могут использовать обычный фон CSS или html, и совсем недавно Джастин Кху в freshinbox обнаружил, что другой почтовый клиент, который до последнего месяца или около того не поддерживал фоновые изображения, приложение Gmail не - Учетные записи Gmail, исправлением для этого было свойство фона css, но с сокращенными значениями свойств.

Ознакомьтесь со всем приведенным ниже кодом - здесь есть все случаи, когда теперь поддерживаются фоновые изображения:

Разрушение

Начиная с таблицы и строки таблицы - мы настраиваем электронную почту так, чтобы она работала во всех перспективах.Здесь ничего нового.

В последнюю минуту! Важная информация

Каждый раз, когда вы создаете дизайн, убедитесь, что он работает без фонового изображения. Несмотря на то, что он поддерживается, низкая скорость соединения на мобильных устройствах, блокировка изображений, странные крайние случаи и почтовые клиенты могут все испортить! Выше мы определяем цвет фона везде, где это возможно, и он должен контрастировать с любым текстом, который помещается сверху.

Ознакомьтесь с другими удивительными ресурсами в веб-пространстве #emailgeeks!

Litmus: полное руководство по фоновым изображениям - Джейсон Родригес

Gmail IMAP (GANGA) наконец-то поддерживает фоновые изображения в новом обновлении - Джастин Кху

Мониторы кампании Bulletproof Backgrounds - Stig Morten Myre

Джей Орам - @emailjay_
Coder @ Action Rocket

.