CSS Rotate Background
Фоны являются очень важным элементом HTML-скриптов и веб-страниц, когда речь идет о стиле и эстетике веб-сайта или портфолио. Некоторые веб-сайты используют простой белый фон без использования изображений, в то время как некоторые веб-сайты используют изображения в качестве фона, чтобы сделать свои веб-сайты более эстетичными и стильными. Язык сценариев HTML использует стили CSS для оформления фоновых изображений веб-сайтов с использованием различных свойств. В этой статье мы будем использовать все эти свойства для поворота, перевода и масштабирования фоновых изображений веб-страниц.
Пример # 01:
Давайте начнем с этого HTML-скрипта с простого базового HTML-тега, за которым следует тег head, используемый для заголовка веб-страницы с помощью тега title. Тело тега HTML покрыто различными элементами, такими как div и метки. В этом HTML-скрипте у нас есть два основных элемента div. Внутри обоих основных элементов div у нас также есть два дочерних тега «div», которые определяются двумя разными классами a и b.
Оба внутренних тега div используют элемент «label», чтобы пометить некоторый текст внутри «div» и указать, что div является нормальным или повернутым. Обе метки получили пунктирную границу шириной 1 пиксель, в то время как первая метка div была синей, а вторая — красной.
Взглянув на тег стиля, мы узнали, что оба внутренних раздела «div» стилизуются отдельно с использованием соответствующих классов: a и b. Оба элемента div используют одно и то же фоновое изображение из системы без повторения фона, одинаковой высоты и одинаковой ширины: 120px и 30px. В то время как второй внутренний div также будет содержать некоторые дополнительные стили. Мы использовали свойство margin-top, чтобы разместить этот раздел div на расстоянии 100 пикселей от верхней части HTML-страницы и повернуть его на 90 градусов вправо, используя свойство преобразования.
После этого мы повернули его на 45 градусов в противоположном направлении от начала. Давайте сохраним и запустим этот скрипт сейчас.
Вывод ниже показывает четкое представление приведенного выше HTML-кода.
Первый раздел div содержит изображение с меткой без поворота и без повторения фона. Другой раздел div содержал изображение и метку, в то время как он был сначала повернут на 90 градусов, а затем перекошен, переведен и масштабирован на 45 градусов по отношению к исходному положению.
Пример № 02:
В приведенном выше примере мы повернули разделы div вместе с их фоновыми изображениями и метками, которые они содержат. Теперь мы рассмотрим использование различных свойств для поворота фонового изображения с текстом и без него на HTML-странице. Тело этой HTML-страницы заполнено заголовком размером 1 и 4 различными разделами div с некоторыми текстами. Все эти 4 элемента div были указаны с разными идентификаторами и классами для их отдельного стиля: идентификатор «rotateImageOnly» для первого элемента div, класс «rotate» для второго элемента div, класс «rotateTranslate» для третьего раздела элемента div и класс «translateRotate». для четвертого раздела div. В элементе тега стиля мы использовали элемент div в одном стиле для всех 4 элементов для некоторых свойств.
Итак, мы указываем абсолютную позицию, 40 пикселей слева, 100 пикселей сверху, 100 пикселей ширины и высоты для всех, и фоновое изображение будет одинаковым для всех.
В то время как мы использовали идентификатор первого div в этом теге стиля, чтобы изменить его положение на относительное, изменить ширину и высоту, а также левые поля. Фоновое изображение для первого div не будет переопределено, и будет использоваться более старое. Фоновое изображение для этого раздела div будет повернуто на 45 градусов без перевода или поворота его текста. После этого все три раздела div будут переопределять новое фоновое изображение.
Второй раздел div был обведен пунктиром на 2 пикселя, повернут на 45 градусов, его текст также будет переведен на 200 пикселей. Фоновое изображение третьего раздела div повернуто на 90 градусов вместе с его текстом, в то время как 4-й раздел div был повернут на 180 пикселей вместе с его текстом.
Вывод этого HTML-скрипта показывает в общей сложности 4 элемента div с фоновыми изображениями.
Первый div использует разные фоновые изображения, в то время как другие переопределяют новые изображения. Фоновое изображение первого раздела div было повернуто на 45 градусов, а его текст не повернут.
Фоновое изображение для второго элемента div повернуто на 45 градусов, а его текст переведен на 200 пикселей. Фоновое изображение для третьего раздела div было повернуто на 90 градусов вместе с его текстом. Точно так же фоновое изображение для четвертого раздела было повернуто на 180 градусов, а его текст был переведен на 180 пикселей.
Пример № 03:
Давайте начнем с последнего примера этой статьи, чтобы использовать некоторые свойства CSS для фоновых изображений некоторых элементов веб-страницы HTML. Сначала мы рассмотрим тело HTML-страницы. Внутри тега body для этой HTML-страницы мы использовали единственный заголовок размером 1. С тегом body больше ничего не нужно делать, поэтому мы рассмотрим тег стиля HTML-страницы. В теге заголовка HTML-кода есть тег заголовка, который использовался для обозначения этого как «Преобразование фонового изображения».
Этот тег стиля был запущен с использованием элементов тела. Для стилизации мы использовали свойство background-image, чтобы добавить изображение в качестве фона. Мы установили фон без повторения, чтобы фоновое изображение не могло повторяться на веб-странице HTML. Кроме того, свойство background-attachment используется для исправления фонового изображения, а text-overflow используется для наследования общих свойств содержимого по всей странице. Другой элемент body был использован с атрибутом after для создания другого фонового изображения с абсолютной позицией: верхнее поле 10%, левое поле 30%, ширина и высота 300 пикселей вместе с тем же фоновым изображением, имеющим непрозрачность 0,5.
Радиус границы этого изображения установлен на 50%. Это означает, что это изображение будет показано в круге. Кроме того, его фоновое изображение будет повернуто на 45 градусов, и свойство повторения фона не применяется, поэтому изображение может повторяться много раз.
Вывод показывает, что первое фоновое изображение отображается просто без поворота, без перевода и без повторения.