Top-office11.ru

IT и мир ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Свойство transparent css

Справочник CSS

Свойства CSSОписание свойств CSS
backgroundОпределяет стиль фона. (базовый атрибут).

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

Атрибуты стиля фона и их возможные значения:

background-attachment — прокрутка фонового изображения.

  • fixed — фиксированный фон.
  • scroll — подвижный фон (по умолчанию).

background-color — определяет цвет фона элемента.

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255, 0, 0) — значение цвета RGB.
  • transparent — прозрачный фон.

background-image — фоновое изображение элемента.

  • url — путь к файлу с изображением.
  • none — изображение отсутствует.

background-position — позиция фонового изображения элемента.

    по горизонтали:
  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

    по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.

background-repeat — регулирует повторение фонового изображения.

  • no-repeat — не повторять, показать только одно изображение.
  • repeat — повторять (по умолчанию).
  • repeat-x — повторять только по горизонтали.
  • repeat-y — повторять только по вертикали.

Для более детального ознакомления смотрите каждый атрибут отдельно.

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

body <
background: url(fon.jpg) fixed repeat-y
>

background-attachmentОпределяет будет ли прокручиваться фоновое изображение элемента.

Если в том или ином элементе страницы присутствует полоса прокрутки то по умолчанию фоновое изображение прукручивается вместе с остальным содержанием данного элемента. Атрибут background-attachment может принять одно из двух значений: запретить прокрутку фонового изображения или же разрешить прокрутку.

Возможные значения:

  • fixed — фиксированный фон.
  • scroll — подвижный фон (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg);
background-attachment: fixed
>

background-colorОпределят цвет фона элемента.

Цвет может быть задан следующими методами:

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255, 0, 0) — значение цвета RGB.
  • transparent — прозрачный фон.

Синтаксис:

h1 < background-color: red >
h2 < background-color: #ff0000 >
h3 < background-color: RGB(255, 0, 0) >

background-imageДелает графическое изображение фоном элемента.

К фоновому изображению указывается путь, либо устанавливается отсутствие фонового рисунка.

Значения:

  • url() — путь к файлу с изображением.
  • none — изображение отсутствует (по умолчанию).

Синтаксис:

body <
background-image: url(fon.jpg)
>

background-positionОпределяет положение левого верхнего угла фонового изображения.

Положение рисунка по осям х и у от краёв элемента может задаваться в процентах, пикселях а так же двумя (по вертикали и горизонтали)логическими значениями.

Значения:

    по горизонтали:
  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.
  • Синтаксис:

    body <
    background-image: url(fon.jpg);
    background-repeat: no-repeat;
    background-position: center top
    >

    background-repeatУправляет повторением фонового рисунка.

    Фоновое изображение заданное background-image по умолчанию заполняет весь элемент «плиткой», однако, присвоив background-repeat значения изложенные ниже можно задать несколько вариантов «выкладывания» этой «плитки»

    Значения:

    • no-repeat — не повторять, показать только одно изображение.
    • repeat — повторять (по умолчанию).
    • repeat-x — повторять только по горизонтали.
    • repeat-y — повторять только по вертикали.

    Синтаксис:

    body <
    background-image: url(fon.jpg);
    background-repeat: repeat-x
    >

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

    Атрибуты управляющие бордюром и их возможные значения:

    border-style

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:
    Так как атрибут border является базовым то указываются только значения родственных атрибутов, в любом порядке через пробел.

    div <
    border: RGB(255, 0, 0) 6px double
    >

    border-bottomОпределяет стиль, цвет и ширину нижней границы элемента.

    Атрибуты управляющие бордюром и их возможные значения:
    border-style

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    border-width — устанавливает ширину границы. border-color — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:
    Указываются значения родственных атрибутов, в любом порядке через пробел.

    div <
    border-bottom: red 6px dashed
    >

    border-bottom-colorУстанавливает цвет нижней границы элемента.

    border-bottom-colorr — цвет бордюра, может быть задан одним из четырёх вариантов:

    • #ff0000 — шестнадцатеричное значение цвета RGB.
    • red — именное значение цвета.
    • RGB(255, 0, 0) — значение цвета RGB.
    • transparent — прозрачный бордюр.

    Синтаксис:

    div <
    border: red 5px solid;
    border-bottom-color: #0000ff
    >

    border-bottom-styleОпределяет стиль нижней границы элемента.

    border-bottom-style может иметь следующие значения:

    • none — граница отсутствует (по умолчанию).
    • dotted — граница из ряда точек.
    • dashed — пунктирная граница.
    • solid — сплошная граница
    • double — двойная граница
    • groove — граница «бороздка»
    • ridge — граница «гребень»
    • inset — вдавленная граница
    • outset — выдавленная граница

    Синтаксис:

    p <
    border: red 5px dotted;
    border-bottom-style: solid
    >

    border-bottom-widthОпределяет ширину нижней границы элемента.

    Ширина границы может быть задана значением в пикселях, а так же с помощью зарезервированных слов:

    • thin — тонкая граница
    • medium — средняя толщина границы
    • thick — толстая граница

    Синтаксис:

    div <
    border: #00ff00 solid;
    border-bottom-width: thin;
    border-left-width: medium;
    border-right-width: thick;
    border-top-width: 12px
    >

    border-collapseЗадает стиль рисования границ таблицы.

    Внешний вид границ таблицы может принимать следующий вид:

    • separate — ячейки таблицы отделены друг от друга (по умолчанию).
    • collapse — ячейки таблицы не имеют промежутков между собой.
    • inherit — свойства наследуются у родителя элемента.

    Синтаксис:

    CSS прозрачность – просто о важном

    О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин « CSS прозрачность » (или css opacity ) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.

    Что можно сделать при помощи данной технологии?


    Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:

    • Шапка сайта может быть полупрозрачной, а логотип на ней – совершенно непрозрачным;
    • Прозрачными могут быть боковые поля, подвал и т.д.;
    • Часто с помощью изменения степени прозрачности достигается эффект плавной смены изображений:

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

    За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).

    Данное свойство характеризуется следующими признаками:

    • значение задается в цифровом выражении (от 0 до 10; чем больше число – тем меньшей будет прозрачность объекта);
    • применяется ко всем элементам, имеющимся на странице (то есть можно задать при помощи CSS прозрачность блока или текста);
    • не наследуется.

    Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:

    Техническая сторона вопроса: задаем прозрачность фона

    Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

    Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

    При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

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

    Видоизменяем код на такой:

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

    Техническая сторона вопроса: задаем прозрачность блока

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

    Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

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

    Дополнение

    Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:

    Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.

    Надеемся, что данная статья оказалась для Вас действительно полезной.

    Свойство background: все настройки фона в одном месте

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

    Порядок записи значений background

    Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

    • background-image
    • background-position
    • background-size (CSS3)
    • background-repeat
    • background-attachment
    • background-origin (CSS3)
    • background-clip (CSS3)
    • background-color

    Порядок написания значений может быть произвольным — браузер сам определит соответствие свойств и значений. Но для схематичного пояснения мы используем последовательность из спецификации CSS:

    Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша / .

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

    Для примера запишем стиль через свойство background , определив только цвет фона ( background-color ) и порядок его обрезки ( background-clip ):

    Этот код эквивалентен такому коду:

    Здесь мы отметили те свойства, которые не изменились при написании сокращенной записи. И, наверное, вы уже видите, что свойство background-origin приняло такое же значение, как и background-clip , хотя мы вроде как не собирались его менять. Дело в том, что для background-origin и background-clip используются одинаковые ключевые слова — content-box , padding-box , border-box . И если указать только одно из этих ключевых слов в свойстве background , то оно будет применено сразу к двум свойствам. Если же вам понадобится указать разные значения для background-origin и background-clip , запишите их рядом через пробел, как показано на схеме выше (здесь важна последовательность — сначала идет значение background-origin , затем — background-clip ).

    Влияние каскадности на свойства

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

    Допустим, мы написали следующий код:

    Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство background перезаписало первое значение background-color на значение по умолчанию (т. е. на transparent ). Решить проблему можно, поменяв местами строки:

    А теперь мини-задача: если в последней строке этого кода заменить свойство background-color: blue на упрощенное свойство background: blue , как вы думаете, что произойдет с фоновым рисунком и значением no-repeat ?

    Рекомендации по использованию сокращенного свойства

    Безусловно, использование «мульти»-свойства background может сэкономить место в таблице стилей и сберечь ваше время, но оно также может и повлечь за собой неприятности, часть из которых мы только что рассмотрели. Поэтому используйте данное свойство с умом. Если вам требуется добавить только цвет фона, лучше используйте для этого отдельное свойство background-color . То же самое касается и всего остального.

    Кроме того, если вам потребуется писать стили с учетом поддержки браузера Internet Explorer 8 (или более ранних версий), а в свойстве background у вас будут содержаться значения для свойств CSS3, то браузер не сможет считать их и полностью проигнорирует свойство background . Поэтому свойства из CSS3 рекомендуется записывать по отдельности.

    Далее в учебнике: устанавливаем несколько фоновых рисунков для элемента.

    CSS прозрачность (Opacity vs RGBA)

    На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA. Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.

    CSS прозрачность Opacity

    Цифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот — абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.

    Прозрачность через CSS Opacity

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

    div <
    background: url(images/yourimage.jpg); /* Фон картинка */
    width: 750px;
    height: 100px;
    margin: auto;
    >
    .blue <
    background: #027ав4; /* Цвет полупрозрачного фона */
    opacity: 0.3; /* Значение полупрозрачности фона */
    height: 70px;
    >
    h1 <
    padding: 6px;
    font-family: Arial Black;
    font-weight: bolder;
    font-size: 50px;
    >

    CSS прозрачность в формате RGBA

    Формат для записи цвета RGBA, является более современной альтернативой для свойства opacity. R (red), G (green), B(blue) – значит : красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.

    Теперь давайте рассмотрим наш пример с использованием RGBA. Заменим эти строчки в стилях.

    background: ##027ав4; /* Цвет фона */
    opacity: 0.3; /* значение полупрозрачности фона */

    на следующую одну строку

    background: rgba(2, 127, 212, 0.3);

    Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

    Результат примера с RGBA:

    Второй скриншот намного лучше смотрится, чем первый.

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

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

    Вывод

    Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer. Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS.

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

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    спасибо за полезную статью.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Читать еще:  Php история создания
    Ссылка на основную публикацию
    Adblock
    detector