Style html image background: HTML Background Images

Разное 

Свойства фона в 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).

No related posts.

Автор записи

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

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