Background css no repeat: background-repeat — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Свойства фона в VML — HTeuMeuLeu.com

Недавно мне пришлось провести небольшое исследование фоновых изображений VML. И вот что я узнал об имитации CSS-свойств фона, таких как background-repeat , background-size и background-position в VML.

Но сначала немного предыстории ( ha ) об основах VML и фоновых изображениях.

Основы

VML поддерживается в Outlook в Windows с использованием механизма рендеринга Word (с 2007 по 2019 г.). Чтобы использовать его, вам нужно объявить пространство имен VML в своем коде ( xmlns:v="urn:schemas-microsoft-com:vml" ). Вы можете сделать это встроенным для каждого элемента VML, который вы будете использовать.

Или вы можете объявить его раз и навсегда как атрибут элемента вашей электронной почты. (Обычно я предпочитаю это делать. )

Затем вы можете использовать любую форму VML, например или . Мы будем использовать атрибут stroked="false" для удаления границы по умолчанию вокруг фигур VML и атрибут стиля для определения ширины и высоты

фигуры. (Одна странность VML заключается в том, что такие атрибуты, как штрих или заполнен , также могут быть записаны как штрих или залив . Я предпочитаю первый, потому что он соответствует документации Microsoft, хотя последний соответствует спецификации VML.)

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

 
   imgur.com/pmS2PDm.png" />

Затем мы можем включить наше HTML-содержимое переднего плана в элемент .

 
  
  
   
Привет, мир!

Если мы хотим, чтобы фон подстраивался под содержимое, мы можем опустить объявление height для элемента и применить style="mso-fit-shape-to-text:true; " в элемент .

Поскольку VML поддерживается только в версии . В Outlook (и версиях Internet Explorer 9 и ниже) я всегда заключаю код VML между условными комментариями для Outlook, используя выражение [if mso] . Также стоит отметить, что есть [if vml] выражение, предназначенное для всех механизмов рендеринга, поддерживающих VML (например, Outlook и IE9 и ниже).

Ради подсветки синтаксиса я не буду ставить эти условные комментарии для дальнейших примеров ниже. Но всегда держите их рядом с кодом VML.

background-color

В VML background-color может быть воспроизведен через атрибут color элемента . (Это переопределяет атрибут FillColor , который можно применить непосредственно к любой фигуре VML.)

background-image

В VML background-image можно реплицировать через атрибут src элемент.

background-repeat

В VML background-repeat можно реплицировать с помощью атрибута type элемента .

Есть два возможных значения, которые могут имитировать эквивалент CSS:

  • type="frame" (эквивалентно background-repeat:no-repeat )
  • type="tile" (эквивалентно background-repeat:repeat )

Насколько мне известно, невозможно просто определить эквивалент значений CSS Repeat-x или Repeat-y (ни пробел или раунд , но они очень редко используются в CSS тем не мение).

Использование значения type="frame" приведет к тому, что изображение будет соответствовать всей форме по умолчанию. К счастью, это то, с чем мы можем справиться в следующем разделе.

background-size

В VML значения ключевых слов

содержат , а cover из background-size могут быть реплицированы через атрибут аспект элемента .

  • аспект="по крайней мере" (эквивалент background-size:cover )
  • аспект="максимум" (эквивалентно background-size:contain )

Мы также можем определить точные размеры с помощью атрибута размеров элемента . Необходимо указать оба размера (ширину и высоту изображения), разделив их пробелом или запятой (таким образом, size="64px 64px" и size="64px,64px" совпадают).

Размеры, определенные в пикселях, не будут корректироваться, если Outlook выполняет рендеринг с разрешением 120 dpi. Поэтому я рекомендую всегда использовать значения в пунктах (где 1 пиксель равен 0,75 балла). Предыдущий пример станет следующим:

размеры = "48pt, 48pt" .

Неожиданный эффект размеров в VML заключается в том, что он также применяется к фоновому цвету. Так что в нашем примере цвет фона будет виден только на нашем квадрате 48×48pt.

background-position

В VML background-position можно реплицировать, используя origin 9атрибут 0004 и атрибут позиции . Я обнаружил, что документация Microsoft и официальная спецификация VML очень запутанны в отношении этих атрибутов, иногда вообще не отражая моего опыта работы с ними. Итак, вот мое собственное практическое понимание того, как они работают в

Outlooks .

Для обоих атрибутов требуются две координаты (x и y), разделенные пробелом или запятой. Каждая координата представляет собой дробное значение относительно ширины и высоты (от 0 до 1) изображения для атрибут origin и формы VML для атрибута position . Координаты перемещаются из левого верхнего угла формы VML для атрибута position , а из центра изображения — для атрибута origin .

Мне нравится представлять себе заливку как дополнительный слой внутри формы VML. Этот слой имеет тот же размер, что и сама фигура VML. Атрибут position перемещает весь этот слой внутри фигуры, при этом значения зависят от размера фигуры (от 0 до 1). 9Атрибут 0003 origin

будет перемещать изображение внутри этого слоя из его центра со значениями, относительными к размеру изображения (от 0 до 1).

Визуальное представление моего понимания координат для атрибутов position и origin с заполнением type="frame" в VML.

Например, если мы хотим переместить изображение 64x64 в правый нижний угол фигуры 600x300 VML, мы сначала зададим позицию в 0,5, 0,5 . Это переместит весь слой заливки на половину размера фигуры по горизонтали ( 300px ) и по вертикали ( 150px ). Это сделало бы фактическое изображение частично видимым в правом нижнем углу. Чтобы он снова появился полностью, мы определяем атрибут origin как 0.5, 0.5 . Это сдвинет само фоновое изображение на половину его размера по горизонтали (

32px ) и по вертикали ( 32px ).

позиция 9Атрибут 0004 перемещает слой заливки (синий), а атрибут origin перемещает само фоновое изображение (красный).

По моему опыту, позиционирование фонового изображения в VML немного отличается независимо от того, повторяется изображение или нет.

Неповторяющееся фоновое изображение

С неповторяющимся фоновым изображением ( type="frame" в VML) мы поиграем с атрибутами origin и position . Вот разные эквиваленты обычным значениям в CSS.

  • origin="-0.5,-0.5" position="-0.5,-0.5" равно вверху слева
  • origin="0.5,-0.5" position="0.5,-0.5" равно вверху справа
  • origin="-0. 5,0.5" position="-0.5,0.5" равно внизу слева
  • origin="0.5,0.5" position="0.5,0.5" равно внизу справа

Повторяющееся фоновое изображение

С повторяющимся фоновым изображением ( type="tile" в VML) нам понадобится только атрибут position . Вот разные эквиваленты обычным значениям в CSS.

  • position="0,0" равно вверху слева
  • position="1,0" равно вверху справа
  • position="0,1" равно внизу слева
  • position="1,1" равно внизу справа

Заключение

Полный пример кода вы можете найти здесь (и вот соответствующий тест Email on Acid).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *