Таблица цветов html, палитра и коды цветов в html

Алан-э-Дейл       10.03.2024 г.

Пример 3

В нашем последнем примере мы хотим изменять размер фонового изображения от огромного до 100% с помощью анимации. Основная задача — не понять, что изображено на фоне до момента перехода. Размер фонового изображения уменьшится настолько, что мы сможем понять, что изображено.

.it-wrapper h3{

font-size: 180px;

line-height: 180px;

padding: 20px 30px;

color: rgba(,80,81,.7);

-webkit-text-stroke: 2px rgba(,,,.5);

font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;

text-shadow: 15px 15px 1px rgba(255,255,255,.3);

background-image: url(../images/3.jpg);

background-repeat: no-repeat;

background-position: center center;

background-size: 400%;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

transition: all .3s linear;

-moz-box-shadow:

-10px -10px 0px rgba(255,255,255,.4),

10px 10px 0px rgba(,81,81,.4),

0px 0px 50px 50px rgba(255,255,255,.9) inset;
}

Кроме размера фона, мы также изменим уровень прозрачности rgba значения и добавим причудливый переход тени блока для браузера Firefox:

.it-wrapper h3.it-animate{

background-size: 100%;

color: rgba(,80,81,.1);

-moz-box-shadow:

-20px -20px 0px rgba(255,255,255,.4),

20px 20px 0px rgba(,81,81,.4),

0px 0px 40px 0px rgba(255,255,255,.4) inset ;
}

Это все! Надеемся, Вам понравился этот эксперимент, и он вдохновит Вас!

Демо – Скачать исходный код

Автор урока Mary LouПеревод — Дежурка

Смотрите также:

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу <body>. Затем мы задаем для элемента <div> (с классом wrapper) белый цвет фона:

body {
  background-color: #333;
  background-image: url('image.png');
}
.wrapper {
  width: 80%;
  margin: 20px auto 40px auto;
  background-color: #fff;
  color: #333;
}

Попробовать »

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента <body> и внутри элемента <div>. Если бы цвет фона для элемента <div> не был бы установлен, то в качестве фона был бы показан фон, который установлен для <body>, так как по умолчанию все элементы имеют прозрачный фон.

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

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

прозрачность css

W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

код HTML

<html>

<head>

<style type=text/css>

.img1 { opacity: 0.2; }.img2 { opacity: 0.5; }.img3 { opacity: 1.0; }

</style>

</head>

<body>

<img src=»встовляем картинку»>

<img src=»»>

<img src=»»>

</body>

</html>

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

Понимают CSS3 свойство opacity следующие браузеры:
Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Свойство CSS background-color

Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:

HEX или HEX с альфа-каналом

НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.

Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.

RGB или RGBa

Цвет можно задать при помощи функций CSS и . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).

HSL или HSLa

HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — и . В качестве аргументов обеих по порядку указываются:

  • hue — расположение тона на цветовом колесе (от 0 до 360)
  • saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
  • lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
  • alpha (только для ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).

HTML-цвета

Цвет фона элемента можно задать при помощи его названия на английском языке. Всего 147 вариаций от банальных и до экзотических, типа или . Названия указываются в одно слово без пробелов. Регистр не учитывается.

Ключевые слова

Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:

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

Решение

Первая мысль в данной ситуации — использовать для фона png24-картинку с уже заданной полупрозрачностью. Но эта картинка совершенно лишняя. Можно прекрасно обойтись и без нее (а значит без лишнего запроса к серверу). Давай все-таки попробуем найти оптимальное решение.

Вторая мысль — использовать CSS-свойство opacity. Но в данном случае это не очень удобно. Ведь полупрозрачным тогда станет не только фон, но и надписи. Да, собственно, все окошко сразу.

Конечно, можно попробовать добавить дополнительный контейнер и применять opacity только к нему, но этот HTML-элемент будет предназначен только для оформления и явно будет лишним. Можно ли обойтись без него?

Конечно можно! Если использовать RGBA.

Формат описания цвета RGBA

CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255, вдруг кто не знает).

Синтаксис у этого дела очень простой:

background: rgb( 0, 255, 0);  /* чистый зеленый цвет */

Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).

background: rgba( 255, 0, 0, 0.5);  /* чистый красный с прозрачностью 50% */

Вот оно, решение нашей задачки. Достаточно задать цвет фона с помощью rgba и все будет выглядеть как нам нужно. Без лишних картинок и элементов!

А где мне взять эти циферки?

Посмотреть на составляющие цвета можно используя инструмент фотошопа «пипетка»

О кроссбраузерности

Так как функция RGB значительно старше, чем RGBA и присутствует еще со времен стандарта CSS2, то для подстраховки от самых древних браузеров можно использовать такую дублирующую конструкцию:

.someBlock {
	background: rgb( 255, 0, 0);
	background: rgba( 255, 0, 0, 0.5);
}

При таком подходе у прадедушек современных браузеров не будет полупрозрачности, но сам цвет останется правильным.

Отдельно придется позаботиться об IE. Ослоподобные аж до 8-ой версии включительно не понимают RGBA.

Как всегда: землю — крестьянам, фабрики — рабочим, а ослам — костыль! В виде фильтра gradient.

Само собой, в боевых условиях выносим это правило в отдельный CSS, который подключаем условными комментариями.

		
.someBlock {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000);
       zoom: 1;
}		

Фишка в том, чтобы указать начальный и конечный цвета одинаковыми (ff0000 — красный) и воспользоваться тем, что для градиента в этом фильтре можно задать альфаканал (в примере значение 80).

Для справки: в фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Соответственно шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.

Проверено в:

  • IE 6-9
  • Firefox 3+
  • Opera 10+
  • Safari 4
  • Chrome

CSS курс

CSS курсCSS Краткое введениеCSS грамматикаCSS Id и Class селекторCSS создатьCSS фон(background)CSS текст(text)CSS шрифты(Fonts)CSS ссылка(link)CSS стили списка(ul)CSS таблица(table)CSS Box модельCSS рамка(border)CSS контур(outline)CSS маржа(margin)CSS начинка(padding)CSS Группировка и вложенностьCSS размер(Dimension)CSS дисплей(display)CSS разместить(position)CSS терка(float)CSS выравнивать(align)CSS Сочетание селекторовCSS Псевдо-классыCSS Псевдо-элементCSS Панель навигацииCSS Выпадающее менюCSS Галерея изображенийCSS Прозрачное изображение/непрозрачныйCSS технологии мозаики изображенияCSS Тип носителяCSS селекторы атрибутовCSS резюмеCSS примеров

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство
background-image. Значением этого свойства является путь к файлу картинки. Он
указывается так:

background-image: url(«путь к файлу»);

Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните
с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно
указывать не так, как в примере.

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

Стиль:

202122232425
#div3
  {
  width: 400px;
  height: 250px;
  background-image: url("image.jpg");
  }

HTML код:

31
<div id="div3"></div>

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

CSS background-image — фоновая картинка на сайте

Свойство CSS background-image — позволяет установить фоновое изображение на сайте.

Синтаксис CSS background-image

Например, для установки общего (глобального) фона:

Например фоновая картинка:

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

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-clip

Рассмотрим в отдельности эти параметры

4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.

Синтаксис CSS background-repeat

Где value может принимать следующие значения:

  • repeat-x — повторять фоновое изображение по горизонтали;
  • repeat-y — повторять фоновое изображение по вертикали;
  • no-repeat — не повторять фоновое изображение;
  • repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
  • space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
  • round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.

Синтаксис CSS background-attachment

Где value может принимать следующие значения:

  • scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
  • fixed — при прокрутке скролла фон остается неизменными;
  • local — изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.

4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Синтаксис CSS background-position

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:

  • top — выравнивание по верхнему краю;
  • left — выравнивание с левого края;
  • right — выравнивание с правого края;
  • bottom — выравнивание по нижнему краю;
  • center — выравнивание по центру;
  • число/проценты — можно задавать отступ в виде числа или процентов;

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.

4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.

Синтаксис CSS background-size

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

Так же может принимать два статичных параметра

  • contain — масштабирует изображение по длинной стороне (заполняет все пространство)
  • cover — масштабирует изображение по короткой стороне (заполняет все пространство)

Напоследок запишем все атрибуты вместе:

Для обращения к float из JavaScript нужно писать следующую конструкцию:

background-position – положение фонового изображения

Свойство задаёт позицию фонового изображения (или градиента). Значение по умолчанию: (помещает изображение в верхний левый угол).

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

Указывать значения можно посредством:

  • пикселей (например, );
  • процентов ();
  • с помощью ключевых слов: , , , и ().

В современных браузерах в можно указывать до 4 значений.

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

Задавать можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме ) и величина смещения ( или ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью или .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в 4 значений:

Это свойство поместит изображение слева на 45px и снизу на 10px.

Дополнение

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

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

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

Удачи!

Здравствуйте уважаемые начинающие веб-мастера

Мы уже научились создавать фоновые изображения.

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

Для создания эффекта прозрачности в CSS применяются:

1. Формат RGBA — создаёт прозрачный цвет.

Аббревиатура RGBA включает в себя три цвета

а. R — red (красный);

б. G — green (зелёный);

в. B — blue (синий);

г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

Записывается следующим образом:

color:rgba(120 40 200 0,4);.

2. Свойство CSS opacity — делает прозрачным любой элемент контента.

Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

Записывается так:

opacity: 0.3;

Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.

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

Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.

Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

И добавим в эту вьюгу, прекрасную представительницу холодного царства.

Как видно из результата, получилась какая то аппликация, а не картина.

Чтобы исправить ситуацию, картинке с представительницей холода, нужно задать прозрачность, чтоб она как бы слегка растворилась и слилась с общим фоном.

Прозрачность для изображений создаётся свойством css opacity, и значения его принимаются от 0 до 1.

Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

Давайте зададим картинке прозрачность равную 0.1

Результат:

Как видите, у вьюги проявилось лицо.

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

Для этого в html части кода, разместим тег p с текстом, а в таблице стилей, создадим селектор p, и зададим ему необходимые свойства.

Результат:

Вот так можно создавать изображения и снабжать их надписями. Принцип думаю понятен, остальное будет зависеть от Вашего творческого воображения и полёта фантазии.

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

Результат:

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

Желаю творческих успехов.

Перемена

— Мама, мама! Вовка меня всю обрызгал! — А ты его тоже обрызгай. — Но, мама, как? Я же девочка!

— Официант! Почему в моей котлете волосы? — Понимаете, у нас повар однорукий, он котлеты на груди лепит, вот и налипли. — Представляю, чем он у вас перец фарширует!

Как сделать тень для текста, картинки, блока < < < В раздел > > > Как сделать блок с полосой прокрутки

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.5+ 3.0+ 9.2+ 3.1+ 3.0+ 2.0+ 1.0+

Решение

За управление прозрачностью элемента на странице отвечает стилевое свойство opacity, которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.

Старые версии Internet Explorer не поддерживает opacity, поэтому для этого браузера следует использовать специфическое свойство filter со значением alpha(Opacity=X), где под X подразумевается целое число от 0 до 100. Это значение определяет уровень прозрачности: 0 — полная прозрачность; 100 — наоборот, непрозрачность объекта.

Соединяя воедино два свойства, получим универсальный код, который устанавливает заданную прозрачность для изображений (пример 1).

Пример 1. Полупрозрачное изображение

HTML5CSS 2.1CSS3IECrOpSaFx

Результат примера показан на рис. 1.

Рис. 1. Фотография с различными значениями прозрачности

В данном примере вначале приводится исходная фотография, к которой не применяются настройки прозрачности, последующие фотографии отображаются с уровнем непрозрачности 75%, 50% и 25%.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

HSL

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

В Microsoft PowerPoint

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

  1. Откройте PowerPoint, выберите «Вставить»> «Рисунки», чтобы вставить изображение.
  1. Щелкните изображение правой кнопкой мыши и выберите «Формат изображения».
  1. Щелкните значок изображения на панели «Формат изображения».
  1. Затем щелкните стрелку рядом с полем «Прозрачность изображения» и перетащите ползунок прозрачности, чтобы настроить прозрачность изображения.
  1. Вы также можете изменить прозрачность части изображения, открыть изображение, выбрать его и затем выбрать «Формат изображения».
  2. Выберите Цвет в группе Настроить.
  1. Затем выберите «Установить прозрачный цвет» и с помощью курсора выберите цвет на изображении.

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

Способ 2. Не замороченный

В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta charset=utf-8" />
  <title>Пример 1</title>
  <style type="text/css">
  BODY {
  background: url(http://i75.mindmix.ru/50/90/349050/42/6073342/hhhttttttttt.png);
  background-size:100%;
  }
  div {
 width: 65%;
text-align:center;
 margin-top: 35px;
margin-left: 15%;
}
  </style>
  </head>
  <body>
  <div>
   Текст на рисунке в формате png.
</div>
  </body>
</html>

Однако такой способ не удобен по нескольким причинам:

  1. Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
  2. Нельзя видоизменять цвета фона в css;
  3. Если в браузере отключена функция отображения изображений, то фон исчезнет.

CSS Учебник

CSS ГлавнаяCSS ИнформацияCSS СинтаксисCSS СелекторыCSS ПодключитьCSS КомментарииCSS Цвет
Color
RGB
HEX
HSL

CSS Фон
Background
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Границы
Границы
Ширина
Цвет
Сторона
Стенография
Радиус

CSS Поля
Поля
Коллапс

CSS ОтступыCSS Высота и ширинаCSS Бокс модельCSS Контур
Контур
Ширина
Цвет
Стенография
Смещение

CSS Текст
Цвет
Выравнивание
Оформление
Преобразование
Интервал
Тень

CSS Шрифты
Семейство
Веб-Сейф
Отступление
Стиль
Размер
Гугл
Соединение
Стенография

CSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS ДисплейCSS Макс. ширинаCSS ПозиционированиеCSS ПереполнениеCSS ПоплавокCSS Линейный блокCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS ПрозрачностьCSS Панель навигацииCSS ВыпадающийCSS ГалереяCSS СпрайтыCSS Атрибуты селекторовCSS ФормыCSS СчетчикиCSS Макет сайтаCSS Еденицы измеренийCSS Особенности

Префиксы.

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

Итак, вендорные префиксы это особые приставки к свойствам CSS используемые браузерами для экспериментальных свойств которые официально не входят в спецификацию CSS.

Мы с Вами помним, что спецификация CSS 3 пока что находится в стадии разработки и формально свойств описанных в этом учебнике не существует в природе, однако браузеры на свой страх и риск уже их активно используют.

Почему на свой страх и риск? Да потому что есть вероятность, что когда будет официально утверждена спецификация CSS 3 описанные в ней свойства по своему действию будут отличатся от свойств с таким же именем которые уже используются браузерами. Ну вот взбрендит допустим разработчикам спецификации CSS 3 обозначить свойство opacity не как степень прозрачности блока, а например как его штриховку или мерцание (бред конечно пишу), что тогда будут отображать уже миллионы установленных браузеров для которых opacity это именно прозрачность!?

Или допустим, разработчики браузера придумали своё собственное свойство – нововведение, которого вообще нигде и ни у кого нет, но документ с таким свойством не проходит проверку на валидность потому что такого свойства в спецификации нет.

По этим и другим причинам браузеры используют префиксы вначале свойств, которые не входят в официальную спецификацию. У каждого браузера свой префикс начинающийся со знака «-» данный знак вначале свойства, как впрочем и этот знак «_», согласно спецификации CSS 2.1 обозначает что свойство зарезервировано для CSS расширений тех или иных браузеров.

Вот наиболее популярные браузеры и их префиксы:

Браузер Префикс
Opera -o-
Firefox, SeaMonkey, Camino -moz-
Internet Explorer 8 и выше -ms-
Safari до версии 3, Konqueror -khtml-
Safari 3 и выше, Google Chrome -webkit-

Использовать префиксы очень легко достаточно взять какое либо свойство CSS и подставить к нему нужный префикс, например к свойству opacity подставляем -moz- получается: -moz-opacity

Хотя на самом деле моё выражение «использовать префиксы» неверно! на самом деле ничего никуда не подставляется, просто есть свойство opacity, а есть -moz-opacity и это два разных свойства которые необязательно должны выполнять одну и ту же функцию!! — это следует понимать..

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

Что же касается этой главы про прозрачность, то следует отметить, что браузер Firefox 3.5 и его более ранние версии используют своё собственное свойство -moz-opacity, а браузер Safari до версии 1.1 использует своё свойство -khtml-opacity.

Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:

Как видите префиксы значительно растягивают код и их использование не всегда оправданно, если версии браузеров, желающих работать с теми или иными свойствами только с использованием своих префиксов, достаточно старые, как в случае со свойством opacity, то можно их и не указывать.. – хотя конечно это вредный совет..

..ну а теперь полезные советы..

Цвет фона блока

Свойство background-color устанавливает цвет фона. Значением этого свойства
является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно
принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

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

Создадим блок, зададим ему размеры и установим цвет фона.

Стиль:

+

789101112
#div1
  {
  width: 300px;
  height: 50px;
  background-color: Green;
  }

HTML код:

16
<div id="div1">Блок с фоном</div>

Свойство CSS background-attachment

При помощи в CSS описывается положение фонового изображения относительно вьюпорта (видимой области экрана). В качестве значения этого свойства используются следующие ключевые слова:

  • — значение по умолчанию, картинка зафиксирована в пределах элемента, который движется во время скролла вьюпорта (надеюсь, эврисинг понятно 😉
  • — картинка зафиксирована в пределах вьюпорта, даже не смотря на то, что элемент, в котором она находится, движется при скролле
  • — картинка скроллится внутри элемента.

Осознаю, что сказанное выше похоже на кашу из слов, но я старался как мог. Проще всего проиллюстрировать свойство на примерах.

Подведем итоги сначала

Мы кратко объяснили формат изображения, который может обеспечить прозрачность фона изображения. А теперь подведем итоги —

Если вы хотите использовать прозрачное фоновое изображение, бывает, что цвет фона места на веб-странице белый, или вы не возражаете против этих мелких «заусенцев», вы можете полностью использовать прозрачное изображение в формате gif.

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

Если вы можете гарантировать, что у ваших пользователей и браузеров установлен подключаемый модуль flash display, и у вас есть большое количество человеческих ресурсов для создания и поддержки flash-изображений, то вы можете использовать flash-фоновые прозрачные изображения.

Если случайно ни одна из трех вышеперечисленных ситуаций вам не подходит, боюсь, вам нужно продолжить чтение.

Гость форума
От: admin

Эта тема закрыта для публикации ответов.