Прозрачность фона css

Полупрозрачный фон

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

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

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

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

Клетчатое изображение

Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.

Рис. 3. Увеличенный клетчатый рисунок

Вот как в итоге это выглядит (рис. 4).

Рис. 4. Имитация полупрозрачности

Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность.

У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя.

Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

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

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

Обратите внимание

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность.

Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3).

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

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Исполинская звездная спираль с поперечником в 50 кпк, это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.

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

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5);
}

Решается это заменой свойства background-color на background.

div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5);
}Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.

Источник: http://htmlbook.ru/blog/poluprozrachnyy-fon

Способы создания прозрачных фонов

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

Как задать прозрачность?

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

  • Свойство opacity.
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

HTML:

DOCTYPE html>
TODO supply a title Тут будет много Вашего текста

CSS:

body { background: url(./vaden-pro-logo.png); /* Фон для тела страницы */ } . prozrachen { padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50%; /* Задаем ширину блока */
  opacity: 0.7; /* Задаем прозрачность */ font: 48px/64px Times New Roman; text-align: justify; }

В результате мы получили полупрозрачный блок:

Важно!!!

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка: 
    filter: alpha(Opacity=70);
     

    Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).
  3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

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

  1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
  2. Используем ее в качестве бэкграунда:body { background: url(./vaden-pro-logo.png); } .prozrachen { padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; }

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a);

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body { background: url(./vaden-pro-logo.png); /* Фоновый рисунок */ } .prozrachen { padding: 10px; background: rgba(0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; }

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

Успехов!!!

Источник: https://vaden-pro.ru/blog/css/prozrachnyy-fon-background-css

Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона

Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3.

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

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

Важно

Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.

Полупрозрачный фон без rgba и hsla

  1. Полупрозрачный PNG. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.

    Недостатки: Только один – требуется хак для IE6 и младше, устраняющий проблему с полупрозрачностью.

  2. Прозрачность через opacity. Прозрачность блока задаётся кроссбраузерно следующим образом:opacity:0.5; filter:alpha(opacity=50);

    -moz-opacity:0.5;

    где 0,5 и 50 – это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то мы увидим тот третий вариант на изображении выше – контент блока также станет полупрозрачным. Однако выход есть – свободное позиционирование, при помощи которого под блок текста кладётся другой блок, которому и задана полупрозрачность..

    Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.  

            Текст текст текст, много-много текстаbody { background: url(image.jpg); } #block_bg {     position: relative;    overflow: hidden;    width: 400px;    padding: 10px;  }    #block_text { position: relative; z-index: 100; }    #block_transparent {       opacity: 0.5;       filter: alpha(opacity=50);       -moz-opacity: 0.5;       background: #fff;       position: absolute;       top: 0;       left: 0;        z-index: 90;        height: 5000px;       width: 400px;

       }

    Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет).

    Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).

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

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

    Недостатки: Слишком громоздко.

rgb и hsl, rgba и hsla – свойства CSS3

Точнее это не совсем свойства – это новая возможность задавания цвета для таких свойств как background, color, border и т.д.

Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness).

Первая система описывает цветовое пространство посредством смешивания основных цветов – красного, зелёного и синего.

Совет

Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный?

rgb и rgba

Начнём с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку – 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.

Рассмотрим всё на примере свойства background (хотя желающие могут взять color или border).

background: rgb(0, 0, 255); /*чисто синий цвет*/ background: rgb(100%, 50%, 0%); /*чисто синий цвет*/ background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/ background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/

background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/

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

hsl и hsla

И несколько слов о hsl и hsla. Значение a задаётся также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задаётся от 0 до 360, а s и l – от 0% до 100%.

И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с «пипеткой»), то здесь достаточно иметь одну картинку перед глазами, чтобы всё стало на свои места. Картинка показывает оттенки параметра h.

Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0% – это ненасыщенный цвет (оттенок серого), а 100% – самая насыщенность) и его светлоту (0% – при нём цвет всегда будет чёрный, а при 100% — белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.

Теперь всё цветовое пространство в голове как на ладони. Конечно ручной подбор не заменяет пипетку, да и не всем нужно в голове иметь «цветовое пространство», но иногда, чтобы быстро прикинуть что надо и потестить – оно подходит.

И буквально пара примеров

Обратите внимание

background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/ 
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зелёного*/

Недостатки: все 4 свойства не поддерживаются ишаком и старыми браузерами.

Завершение

В общем, CSS3 даёт очередные очень полезные вещи, но как всегда, IE – основной тормоз прогресса. Для сайтов клиентов я бы пока воздержался от использования (ещё мозг зазря будут выносить) и брал бы вариант с PNG. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.

css3

Источник: http://ShuBlog.ru/html-and-css/svojjstva-css3-chast-4-rgba-hsla-i-prozrachnost-fona/

CSS прозрачность — кросс-браузерное решение

Кросс-браузерность прозрачности

Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.

Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.

Такой хороший 🙂 браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х — это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 — это полная прозрачность, а 100 — полная непрозрачность.

Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.

Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.

Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:

filter: alpha(Opacity=50); /* Прозрачность для IE */
-moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */
-khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */
opacity: 0.5; /* Поддержка всех остальных браузеров */

Прозрачность различных элементов

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

CSS прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

Результат:

Прозрачность на CSS при наведении курсора на картинку .

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор.  Сделать это можно при помощи CSS псевдокласса :hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом :hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

Пример:

Результат можете посмотреть в демо.

Прозрачность фона на CSS.

Важно

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

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

Текст

Вот результа размещенного выше кода:

Прозрачность текста.

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

Прозрачный текст!

Результат работы кода:

Подробности

Источник: http://WebMasterMix.ru/lessons-css/277-css-prozrachnost.html

Прозрачность CSS только для цвета фона, а не текста на нем?

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

Использование образца:

#div { background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */ background: rgba(54, 25, 25, .5);
}

Демо

Отметьте http://caniuse.com/#search=rgba, чтобы увидеть поддержку браузеров

ответ дан Tim Cooper 27 февр. '11 в 21:32

источник поделиться

Самый простой способ сделать это — 2 divs, 1 с фоном и 1 с текстом:

#container { position: relative; width: 300px; height: 200px;
}
#block { background: #CCC; filter: alpha(opacity=60); /* IE */ -moz-opacity: 0.6; /* Mozilla */ opacity: 0.6; /* CSS3 */ position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
#text { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
} Test

ответ дан Kostas 27 февр. '11 в 22:40

источник поделиться

ТОЛЬКО ДЛЯ МЕНЬШЕГО ПОЛЬЗОВАТЕЛЯ:

Если вам не нравится устанавливать цвета с помощью RGBA, но, используя HEX, есть решения.

Вы можете использовать mixin как:

.transparentBackgroundColorMixin(@alpha,@color) { background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

И используйте его как

.myClass { .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

На самом деле это то, что встроенная функция LESS также обеспечивает:

.myClass { background-color: fade(#FFFFFF, 50%);
}

Смотрите Как преобразовать цвет HEX в rgba с помощью компилятора Less?

ответ дан Sebastien Lorber 26 июня '14 в 16:39

источник поделиться

Мой трюк состоит в том, чтобы создать прозрачный .png с цветом и использовать background:url().

ответ дан user1542894 17 февр. '13 в 19:12

источник поделиться

У меня была та же проблема. Я хочу 100% прозрачный цвет фона, просто используйте этот код, он отлично работает для меня:

rgba(54, 25, 25, .00004);

Вы можете увидеть примеры на слева на этой веб-странице (область формы контакта)

ответ дан user2178930 17 марта '13 в 12:16

источник поделиться

Отличный способ сделать это — использовать css3.

Создайте div ширину класса — например. supersizer поверх вашей страницы:

затем задайте следующие css-свойства:

.supersizer { background: url(«http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png») no-repeat center center fixed; width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; }

ответ дан Wolfgang Zotter 19 марта '14 в 10:17

источник поделиться

Самое простое решение — создать 3 divs. Один из них будет содержать другие 2, один с прозрачным фоном и один с контентом.

Сделайте первое относительное положение div и установите значение с прозрачным фоном на отрицательный z-index, затем отрегулируйте положение содержимого, чтобы оно соответствовало прозрачному фону.

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

ответ дан Balsa 18 янв. '13 в 13:13

источник поделиться

использовать

background:url(«location of image»);//use an image with opacity

Этот метод будет работать во всех браузерах

ответ дан Neeraj 03 февр. '14 в 12:16

источник поделиться

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

Я попытался сделать это недавно, и поскольку я уже использовал jQuery, я обнаружил, что нижеследующее — это наименьшая проблема:

  • Создайте два разных div. Они будут братьями и сестрами, не содержаться ни в одном, ни в другом.
  • Придайте text div сплошной цвет фона, потому что это будет значение по умолчанию без JS.
  • Используйте jQuery для получения высоты div text и примените его к div background.

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

ответ дан sdleihssirhc 27 февр. '11 в 21:32

источник поделиться

Источник: http://qaru.site/questions/13105/css-opacity-only-to-background-color-not-the-text-on-it

Как сделать полупрозрачный фон на чистом CSS

ZorNet — портал для вебмастера » HTML и CSS » Как сделать полупрозрачный фон на чистом CSS

Все больше дизайн выстраивают на прозрачном фоне, в этом материале рассмотрим о том, как создать его и с последствием добавлением на сайт. Нужно изначально знать о небольшой проблеме, которая заключается в том, где при добавлении прозрачного или полу прозрачного фона и его использование в формате PNG, когда форматирование происходит в самом изображение профессиональными программами, такими как фотошоп. Если брать палитру цвета, то здесь совершенно другая ситуация, где можно выставлять любой оттенок, что будет прозрачным фоном. Для того, чтоб прописать в стилистике CSS сайта, то здесь нужно специально заданный формат под такую палитру оттенка, который будет задаваться в rgba формаций. Где можно задать уже составляющее оттенки цвета, как Red, Green, Blue, где изначально будет прозрачен. Но здесь может быть как сильно прозрачным, так сделать ее намного меньше. Здесь палитра цвета будет состоять из составляющие численности от 0 до 255, где сама прозрачность от нуля до одного. Думаю многие согласятся, что нужна будет такая палитра цвета, что просто не выставить ее, что нет такой, только при подключении прозрачности можно настроить этот оригинальный оттенок. Рассмотрим один из примеров полупрозрачного оттенка в алом цвете.

Как пример:

HTMLЗдесь прозрачно красный оттенокТакже можно на CSSЭто уже темно красный оттенок на прозрачном виде.div {   background-color:rgba(169, 5, 5, 0.5);

}

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

Здесь хочется рассмотреть еще один вариант:

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

Если все рассмотреть подробнее, то не так все сложно, как изначально может показаться.

Для этого возьмем один код:

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

Что после всего получится такой вид:

HTML CSS.transmittance {   opacity:0.4;   filter:alpha(opacity=50);   -moz-opacity:0.7; background-color:#1b1919; width:579px; height:2175px; position:absolute;   top:0px;   left:0px; z-index:-1;

}

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

Демонстрация

Источник: http://zornet.ru/load/kak_sdelat_poluprozrachnyj_fon_na_chistom_css/145-1-0-8971

Прозрачность фона CSS. Прозрачный фон или текст с помощью CSS

Интернет 19 января 2015

С приходом CSS3 работа верстальщиков во многом стала проще и логичнее: ведь теперь можно действительно гибко настроить какой-либо объект, все реже прибегая к JavaScript. Допустим, вам надо настроить прозрачность фона — CSS тут же предлагает несколько вариантов.

Фон задается набором атрибутов (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), причем каждый из них можно прописать отдельно или же объединить под атрибутом background. Разберем каждый из них подробнее.

Атрибут background-color

В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Совет

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии.

Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Атрибут background-image

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

body {background-image: url(bg1.png), url(bg2.png)}.

Такой способ поддерживает даже IE8. Несколько изображений в качестве фона используются при резиновой верстке. Главное, не забывайте при использовании любого изображения также задавать в CSS цвет фона, так как у пользователей может просто не загрузиться картинка.

Видео по теме

Атрибут background-position

Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:

body {background-position: right center;} — в этом примере фон будет располагаться в правой части страницы, причем снизу и сверху расстояния до изображения одинаковы.

Атрибут background-size

Иногда требуется с помощью CSS растянуть фон или уменьшить его размер. Для этого используют атрибут background-size, причем размер фона можно задать как в пикселях или процентах, так и в любых других единицах измерения.

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

Атрибут background-attachment

Этот атрибут задает поведение фонового изображения при прокрутке. Так, он может принимать 3 значения (не учитывая inherit, общего для всех представленных в этой статье атрибутов):

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

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

body {background-attachment fixed}.

В настоящее время Firefox не поддерживает последнее свойство (local).

Атрибут background-origin

Этот атрибут отвечает за позиционирование элемента. Браузеры ранних версий требуют использования префиксов. Само свойство имеет три параметра:

  • padding-box позиционирует фон относительно края, при этом учитывая толщину рамки;
  • border-box отличается от предыдущего свойства тем, что линия границы может полностью или частично перекрывать фон;
  • content-box позиционирует изображение, прявязывая его к контенту.

Если задано несколько значений, то браузеры могут реагировать по-своему: Firefox и Opera воспринимают только первый вариант.

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

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

Пример использования атрибута:

body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.

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

Атрибут background-clip

Этот атрибут определяет поведение фона под границами (например, в случае пунктирных рамок):

  • padding-box — фон отображается строго внутри блока;
  • border-box — изображение заходит под рамки;
  • content-box — картинка на фоне появляется только внутри содержимого.

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

body {background-clip: content-box;}.

Chrom и Safari требуют использования префикса -webkit-.

Атрибуты opacity и filter

Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSSбез целого значения: вместо 0.3 достаточно написать .3:

.block {background-image: url(img.png); opacity: .3;}.

Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

.block {background-image: url(img.png); filter: alpha(opacity=30);}.

В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3.

При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS.

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

Источник: fb.ru

Источник: http://monateka.com/article/116923/

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

Прозрачность и псевдокласс :hover

Псевдокласс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство opacity, описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате RGB. RGB (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

color: rgb(255,255,0);
color: rgb(100%,100%,0);

Цвета, заданные с помощью RGB, будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB. Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

color: rgba(255,255,0,0.5);
color: rgba(100%,100%,0,0.5);

Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

body { background-image: url(img.jpg); }
.prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center;
}
.prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center;
}
Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA:
background: rgb(255,255,0);
background: rgba(255,255,0,0.5);

« перейти к предыдущей теме перейти к следующей теме »

Источник: http://web.ryusupov.com/css/?p=16_opacity

Прозрачность фона на CSS

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

В последнем случае полупрозрачности как таковой не будет, только более блеклый тон.
Существует множество способов реализовать в CSS прозрачность фона.

Это и использование PNG изображения, и создание клетчатой картинки, и применение свойства opacity.

Фон из PNG изображения

Сначала необходимо создать полупрозрачный фоновый рисунок в графическом редакторе, а потом сохранить его в формате PNG-24. После этого просто применяем свойство background-image.
Пример кода:

.classname { background-image: url(opacity.png); /* Полупрозрачный фон */ }

Этот метод плохо работает в InternetExplorer версии 6 и ниже. Чтобы реализовать прозрачность PNG, необходимо воспользоваться специальными скриптами. Этот способ имеет некоторые ограничения:

  1. Если в браузере отключить картинки, фоновое изображение пропадет.
  2. Если требуется изменить прозрачность фона, придется переделать картинку.
  3. Нельзя менять прозрачность методами JS. Также невозможно к такому фону применять анимацию, напрямую изменяющую прозрачность.

Клетчатое изображение

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

Свойство opacity

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

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

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

Синтаксис следующий (пояснения в комментариях).

.test { opacity: 0.7; /* Полупрозрачный фон */ filter: alpha(Opacity=70); /* Прозрачность в IE */ }

Обратите внимание

Свойство filter: alpha(Opacity=70) реализуется для поддержки старых версий InternetExplorer. Для полной совместимости необходимо указывать оба свойства. Плюс этого метода в том, что можно гибко управлять прозрачностью элемента средствами JS или CSS. Например, можно сделать элемент просвечивающимся при наведении с помощью псевдоселектора :hover.

.test:hover { opacity: 0.7; /* Полупрозрачный фон */ filter: alpha(Opacity=70); /* Прозрачность в IE */ }

Источник: https://lsreg.ru/prozrachnost-fona-na-css/

не html цвет фона — Как передать текст или изображение прозрачным фоном с помощью CSS?

Почти все эти ответы предполагают, что дизайнер хочет сплошной цвет фона. Если дизайнер действительно хочет, чтобы в качестве фона единственным реальным решением на данный момент был JavaScript, как плагин jQuery Transify, упомянутый в другом месте .

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

Самый простой способ — использовать полупрозрачный фоновый PNG-образ .

Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6 если вам нужно.

Я использую метод, описанный в Transparent PNG в Internet Explorer 6 .

Помимо этого,

вы могли бы подделать его, используя two side-by-side sibling elements — сделать один полупрозрачный , а затем absolutely position the other over the top ?

Лучше использовать полупрозрачный .png .

Просто откройте Photoshop , создайте 2×2 пиксельное изображение ( выбор 1×1 может вызвать ошибку Internet Explorer! ), Залейте его зеленым цветом и установите непрозрачность на вкладке «Слои» на 60%. Затем сохраните его и сделайте фоновым:

any text

Разумеется, это работает классно, за исключением прекрасного Internet Explorer 6 . Есть лучшие исправления, но вот быстрый взлом:

p { _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('»')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

Важно

Это лучшее решение, которое я мог бы придумать, НЕ используя CSS 3. И он отлично работает на Firefox, Chrome и Internet Explorer, насколько я могу судить.

Поместите контейнер DIV и два дочерних DIV на одном уровне, один для контента, один для фона. И используя CSS, автоматически задайте размер фона, чтобы он соответствовал содержимому, и поместил фон в обратную сторону, используя z-index.

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=50)»; filter: alpha(opacity=50); opacity: .5; } Here is the content.
Background should grow to fit.

Либо используйте полупрозрачное изображение PNG либо используйте CSS3:

background-color:rgba(255,0,0,0.5);

Вот статья css3.info, Opacity, RGBA и компромисс (2007-06-03).

.imgbox img{ height:100px; width:200px; position:relative; } .overlay{ background:rgba(74, 19, 61, 0.4); color:#fff; text-shadow:0px 2px 5px #000079; height:100px; width:300px; position:absolute; top:10%; left:25%; padding:25px; }

This is Simple Text.

Вы можете использовать RGBA (red, green, blue, alpha) в CSS , что-то вроде этого:

Поэтому просто сделайте что-нибудь подобное в своем случае:

p { position: absolute; background-color: rgba(0, 255, 0, 0.6);
} span { color: white;
}

http://jsfiddle.net/x2ukko7u/ ?

Вы можете решить эту проблему для Internet Explorer 8 (ab), используя синтаксис градиента. Формат цвета — ARGB. Если вы используете препроцессор Sass вы можете конвертировать цвета с помощью встроенной функции «ie-hex-str ()».

background: rgba(0,0,0, 0.5);
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')»;

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

.image{ position: relative; background-color: cyan; opacity: 0.7;
}

// меньшее значение будет больше прозрачности, иначе значение будет прозрачным.

фоновый цвет: RGBA (255,0,0,0.5); как упомянуто выше, лучший ответ просто поставлен. Говорить, что использование CSS3, даже в 2013 году, не просто потому, что уровень поддержки различных браузеров меняется с каждой итерацией.

Хотя background-color поддерживается всеми основными браузерами (не новостями для CSS3) [1], альфа-прозрачность может быть сложной, особенно с Internet Explorer до версии 9 и с цветом границы на Safari до версии 5.1. [2]

Использование чего-то вроде Compass или SASS действительно может помочь в производстве и совместимости с кросс-платформой.

[1] W3Schools: Свойство background-color CSS

[2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)

Некоторое время назад я писал об этом в прозрачной прозрачности браузера с помощью CSS .

Совет

Необычайно Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный PNG-файл.

Проблема в том, что в тексте на самом деле есть полная непрозрачность в вашем примере. Он имеет полную непрозрачность внутри тега p , но тэг p просто полупрозрачен.

Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовать его в CSS, или разделить текст и div на 2 элемента и переместить текст над полем (например, отрицательный запас).

Иначе это будет невозможно.

РЕДАКТИРОВАТЬ:

Точно так же, как сказал Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходное решение JavaScript, чтобы заставить его работать в отвратительном Internet Explorer …

Источник: https://code-examples.net/ru/q/c4c70

Ссылка на основную публикацию