Background size html: CSS background-size property

Документация JDK 19 — Главная

1. Главная
2. Ява
3. Java SE
4. 19

Обзор

• Прочтите меня
• Примечания к выпуску
• Что нового
• Руководство по миграции
• Загрузить JDK
• Руководство по установке
• Формат строки версии

Инструменты

• Технические характеристики инструментов JDK
• Руководство пользователя JShell
• Руководство по JavaDoc
• Руководство пользователя средства упаковки

Язык и библиотеки

• Обновления языка
• Основные библиотеки
• HTTP-клиент JDK
• Учебники по Java
• Модульный JDK
• Руководство программиста API бортового регистратора
• Руководство по интернационализации

Технические характеристики

• Документация API
• Язык и ВМ
• Имена стандартных алгоритмов безопасности Java
• банок
• Собственный интерфейс Java (JNI)
• Инструментальный интерфейс JVM (JVM TI)
• Сериализация
• Проводной протокол отладки Java (JDWP)
• Спецификация комментариев к документации для стандартного доклета
• Прочие характеристики

Безопасность

• Руководство по безопасному кодированию
• Руководство по безопасности

Виртуальная машина HotSpot

• Руководство по виртуальной машине Java
• Настройка сборки мусора

Управление и устранение неполадок

• Руководство по устранению неполадок
• Руководство по мониторингу и управлению
• Руководство по JMX

Client Technologies

• Руководство по специальным возможностям Java

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

com

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

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

Основы

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

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

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

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

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

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

 
   imgur.com/pmS2PDm.png" />
  
   
Привет, мир!
 
  

 

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

Поскольку VML поддерживается только в Outlook (и версиях Internet Explorer 9 и ниже), я всегда заключаю код VML между условными комментариями для Outlook, используя выражение [if mso] . Также стоит отметить, что есть [if vml] выражение, предназначенное для всех механизмов рендеринга, поддерживающих VML (например, Outlooks и 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 и атрибут position . Я обнаружил, что документация Microsoft и официальная спецификация VML очень запутанны в отношении этих атрибутов, иногда вообще не отражая моего опыта работы с ними. Итак, вот мое собственное практическое понимание того, как они работают в Outlooks .

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

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

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

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

Атрибут position перемещает слой заливки (синий), а атрибут 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" равно внизу справа

  
No related posts.