CSS прозрачността е решение за различни браузъри. CSS opacity property: управление на прозрачността Как да го накарам да работи във всички браузъри

Раздели на сайта

Избор на редактора:

Понякога има нужда да направите прозрачен фон за определен блок на страницата. Този ефект може да бъде постигнат чрез създаване на прозрачно фоново изображение във формат *.png и настройването му чрез свойството background: url(“./images/fon.png”); .

Използване на свойството OPACITY

Защо такава сложност, ако може да се направи използвайки CSS. Нека създадем основен блок (страница) и вложен блок (блок) на страницата, на които ще зададем прозрачност. Съвместимостта между различни браузъри се постига, както следва: свойство за Internet Explorer– филтър: алфа (непрозрачност = 50) ( стойност на прозрачност в диапазона от 0 до 100), за браузъри, които поддържат стандарта CSS3 – opacity:0.5 ( число в диапазона от 0,0 до 1,0).

HTML код:

Полупрозрачен елемент div.page ( margin:0 auto; width:450px; height:300px; background:url(../images/3a0fdf3dc1.jpg) no-repeat; border:2px solid #555555 ) div.block ( width :260px; height:140px; border:1px solid #333333; */opacity:p ( margin:47px 0 10px; font-weight:bold; color:#000000; текст -подравняване: център;

Прозрачен фон за блока.

резултат:

Прозрачен фон за блока

Както забелязахте, прозрачността се отнася за всички дъщерни елементи

Прозрачен фон за блока

в DIV с клас блок и те не могат да надхвърлят стойността на прозрачност на техния родител. Тоест всичко, което е в този блок, става прозрачно. Какво да направите, ако трябва да оставите прозрачен фон само за div?

Използване на свойството BACKGROUND-COLOR

Трябва да направим някои промени в таблицата със стилове на CSS, а именно да заменим свойството opacity за DIV с блоковия клас със свойството background-color.

Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* само прозрачен фон DIV.block */ background-color: rgba(255, 255) , 255, 0,5); /* Цвят на фона, прозрачност 0,5*/ )

резултат:

Прозрачен фон за блока

В горния пример се използва за цвят и фон RGBA формат. Където първите три букви означават червено, зелено, синьо (червено, зелено, синьо), последната символизира алфа канала (a) и уточнява прозрачност b елемент от 0.0 към 1.0 .

Цвят на фона: rgba(r, g, b, a);

Стойността на цветния компонент е поставена в скоби вместо букви; графичен редактор, например Paint.Net (екранна снимка). Последната стойност на a задава прозрачността и съвпада със стойността на свойството opacity.

http://cp77.comxa.com/verstka/css-transparent-fon

CSS свойството opacity задава непрозрачността на даден елемент. Непрозрачност е степента, до която съдържанието е скрито зад елемент и е обратното на прозрачността.

Източникът за този интерактивен пример се съхранява в хранилище на GitHub. Ако искате да допринесете за проекта за интерактивни примери, моля, клонирайте https://github.com/mdn/interactive-examples и ни изпратете заявка за изтегляне.

opacity се отнася за елемента като цяло, включително неговото съдържание, дори ако стойността не е наследена от дъщерни елементи. По този начин елементът и неговите деца имат еднаква непрозрачност спрямо фона на елемента, дори ако имат различна непрозрачност един спрямо друг.

Използването на непрозрачност със стойност, различна от 1, поставя елемента в нов контекст на наслагване.

Примери Основен пример div ( цвят на фона: жълт; ) .light ( opacity: 0,2; /* Текстът е едва видим на фона */ ) .medium ( opacity: 0,5; /* Текстът е по-видим на фона */ ) .heavy (opacity: 0.9; /* Видимостта на текста е много ясна на фона */) Едва можете да видите това. Това се вижда по-лесно. Това се вижда много лесно. Различна непрозрачност с: hover img.opacity (непрозрачност: 1; филтър: alpha(opacity=100); /* IE8 и по-долу */ увеличение: 1; /* "hasLayout" се задейства в IE 7 и по-долу */ ) img.opacity :hover (непрозрачност: 0..png" alt="MDN лого" width="128" height="146" class="opacity"> Проблемы доступности !}

Ако непрозрачността на текста е коригирана, важно е да се гарантира, че съотношението на контраста между цвета на текста и фона, върху който е поставен текстът, е достатъчно високо, така че хората с лошо зрение да могат да четат съдържанието на страницата.

Съотношението на цветовия контраст се определя чрез сравняване на яркостта на текста с коригираната стойност на непрозрачността и цвета на фона. За да отговаря на настоящите Указания за достъпност на уеб съдържанието (WCAG), текстовото съдържание изисква съотношение 4,5:1 и 3:1 за по-голям текст като заглавия. Големият текст се определя като 18,66px или по-голям, или 24px или по-голям.

Спецификации Първоначална стойност Отнася се за Наследени Дисплей Обработка на стойността Тип анимация Каноничен ред

1.0

всички елементи

не

визуален

посочената стойност се изрязва до диапазона

номер

уникален двусмислен ред, определен от формалната граматика

Поддръжка на браузър

Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

Актуализирайте данните за съвместимост в GitHub

Мобилни компютри Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome за Android Firefox за Android Opera за Android Safari на iOS Samsung Интернетнепрозрачност Поддръжка на процентни стойности на непрозрачност



Пълна поддръжка на Chrome 1	Поддръжка на Edge Full 12	Firefox Пълна поддръжка 1 Пълна поддръжка 1 Няма поддръжка 1 - 3.5 С префикс С префикс Изисква префикс на доставчика: -moz-	IE Пълна поддръжка 9	Opera Пълна поддръжка 9	Safari Пълна поддръжка 2 Пълна поддръжка 2 Без поддръжка 1.1 - 2 С префикс С префикс Изисква префикс на доставчика: -khtml-	WebView Android Пълна поддръжка 1	Chrome Android Пълна поддръжка 18	Поддръжка за Firefox Android Full 4	Opera Android Пълна поддръжка 10.1	Safari iOS Пълна поддръжка 1	Samsung Internet Android Пълна поддръжка Да
Пълна поддръжка на Chrome 78	Edge Няма поддръжка No	Firefox Пълна поддръжка 70	IE Няма поддръжка No	Opera Няма поддръжка No	Safari Няма поддръжка No	WebView Android Пълна поддръжка 78	Пълна поддръжка за Chrome Android 78	Firefox Android Няма поддръжка No	Opera Android Няма поддръжка No	Safari iOS Няма поддръжка No	Samsung Internet Android Няма поддръжка No

Легенда Пълна поддръжка Пълна поддръжка Без поддръжка Няма поддръжка Изисква префикс на доставчик или друго име за използване. Изисква префикс на доставчик или друго име за използване.

Добър ден, маниаци на уеб разработка, както и начинаещи. За тези, които не следят IT тенденциите, или по-скоро уеб модата, искам тържествено да ви уведомя, че тази публикация е на тема: „Как да направим прозрачен блок css инструменти„точно навреме за теб. Всъщност през настоящата 2016 г. въвеждането на различни прозрачни обекти в онлайн услугите се счита за стилен ход.

Ето защо в тази статия ще ви разкажа за всички съществуващи методи за създаване на прозрачност, като се започне от допотопни решения, ще се съсредоточа върху съвместимостта на решенията с браузърите и също така ще дам конкретни примери програмен код. Сега да се захващаме за работа!

Метод 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

Пример 1 BODY (фон: url(http://i75.mindmix.ru/50/90/349050/42/6073342/hhhtttttttt.png); размер на фона:100%; ) div (ширина: 65%; текст- align:center; margin-left: 15%; текстът в изображението е във формат png.

Този метод обаче не е удобен поради няколко причини:

Internet Explorer 6 не работи с тази технология, трябва да напишете скриптов код за него;

Не можете да промените цветовете на фона в css;

Ако функцията за показване на изображения на браузъра е деактивирана, тя ще изчезне.

Метод 3. Популяризиран

Най-често срещаният и добре известен начин да направите блок прозрачен е свойството opacity.

Стойността на параметъра варира в диапазона, където при 0 обектът е невидим, а при 1 е напълно видим. Тук обаче има и неприятни моменти.

Първо, всички дъщерни елементи наследяват прозрачност. Това означава, че въведеният текст също ще „свети“ заедно с фона.

Второ, Internet Explorer отново „вири носа си“ и до версия 8 не работи с непрозрачност.

За да разрешите този проблем, използвайте filter: alpha (Opacity=value) .

Нека разгледаме един пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Пример 2 BODY (фон: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) без повторение; размер на фона:100% ; ) div ( background: #FFEFD5; opacity: 0.88; filter: alpha(Opacity=88); padding: 25px; text-align:center; ) В нашия магазин ще намерите всякакви цветове.

Метод 4. Модерен

Днес професионалистите използват инструмента rgba (r, g, b, a).

Преди това ви казах, че RGB е един от популярните цветни модели, където R отговаря за всички нюанси на червеното, G – нюанси на зелено и B – нюанси на синьо.

В случай на css параметърпроменлива A е отговорна за алфа канала, който от своя страна е отговорен за прозрачността.

Основното предимство на последния метод е, че алфа каналът не засяга обекти, разположени вътре в стилизирания блок.

rgba(r, g, b, a) се поддържа, започвайки от:

10 версии на Opera;
Internet Explorer 9;
Safari 3.2;
3 версии на Firefox.

искам да отбележа интересен факт! Любимият Internet Explorer 7 извежда грешка при комбиниране на свойството цвят на фона с името на цветовете (цвят на фона: златен). Следователно трябва да използвате само:

цвят на фона: rgba (255, 215, 0, 0.15)

А сега един пример.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Пример 3 BODY (фон: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) без повторение; размер на фона:100% ; ) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) В нашия магазин ще намерите всякакви цветове.

Имайте предвид, че текстовото съдържание на блока е напълно видимо (100% черно), докато фонът е настроен на алфа канал от 0,88, т.е. 88%.

С това публикацията приключва. Абонирайте се за моя блог и не забравяйте да поканите приятели. Желая ви успех в изучаването на уеб езици! Чао чао!

/* 06.07.2006 */

CSS прозрачност (css непрозрачност, javascript непрозрачност)

Ефектът на прозрачност е темата на тази статия. Ако се интересувате да научите как да направите елементите на HTML страницата прозрачни с помощта на CSS или Javascript и как да постигнете съвместимост между различни браузъри (работи еднакво в различни браузъри), като вземете предвид Firefox браузъри, Internet Explorer, Opera, Safari, Konqueror, тогава сте добре дошли. Освен това помислете готово решениеПостепенна промяна на прозрачността с помощта на javascript.

CSS непрозрачност (CSS прозрачност) CSS непрозрачност симбиоза

Под симбиоза имам предвид комбинирането на различни стилове за различни браузърив едно CSS правилоза получаване на желания ефект, т.е. за реализиране на съвместимост между различни браузъри.

Филтър:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и по-ниска версия */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Всъщност първото и последното правило са необходими за IE5.5+ и браузъри, които разбират непрозрачността на CSS3, а двете правила в средата очевидно не правят разлика, но и не си пречат (решете сами дали имате нужда от тях).

Симбиоза с непрозрачност на Javascript

Сега нека се опитаме да зададем прозрачност чрез скрипт, като вземем предвид характеристиките на различните браузъри, описани по-горе.

Функция setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Ако няма елемент с посочения id или браузъра не поддържа нито един от известните методи за контролиране на прозрачността if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Ако прозрачността вече е зададена, променете я чрез колекцията от филтри, в противен случай добавете прозрачност чрез style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid: DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // За да не презапишете други филтри, използвайте "+=" ) else // Други браузъри elem.style = nOpacity; ) функция getOpacityProperty() ( if ( typeof document.body.style.opacity == "string") // CSS3 съвместим (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity";

else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 и по-стари версии, Firefox 0.8 връщат "MozOpacity";

else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity";

else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ връща "филтър";

Някой може да се чуди защо не зададе прозрачност чрез присвояване (=) на свойството elem.style.filter = "..."; ? Защо "+=" се използва за добавяне на свойството на филтъра в края на низа? Отговорът е прост, за да не „презаписвате“ други филтри. Но в същото време, ако добавите филтър по този начин за втори път, той няма да промени предварително зададените стойности на този филтър, а просто ще бъде добавен в края на реда на свойствата, което не е правилно. Следователно, ако филтърът вече е инсталиран, тогава трябва да го манипулирате чрез колекцията от филтри, приложени към елемента: elem.filters (но имайте предвид, че ако филтърът все още не е присвоен на елемента, това е невъзможно за да го управлявате чрез тази колекция). Елементите на колекцията могат да бъдат достъпни или чрез име на филтър, или чрез индекс. Въпреки това, филтърът може да бъде зададен в два стила, краткият стил на IE4 или стилът на IE5.5+, който се взема предвид в кода.

Плавна промяна на прозрачността на елемент

Готово решение. Използваме библиотеката opacity.js

img (filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Създайте правило за промяна на прозрачността: задайте името на правилото, началната и крайната прозрачност, като както и незадължителен параметър закъснения, влияещи върху скоростта на промяна на прозрачността fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

Основни стъпки:

Свързваме библиотеката от функции;

Ние дефинираме правилата с помощта на метода fadeOpacity.addRule();

Извикваме метода fadeOpacity(), за да променим прозрачността от първоначалната стойност до крайната стойност, или fadeOpacity.back(), за да върнем първоначалната стойност на нивото на прозрачност.

Да дъвчем

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

Правилата се дефинират с помощта на метода fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументи:

sRuleName - име на правилото, зададено произволно;
nStartOpacity и nFinishOpacity - начална и крайна прозрачност, числа в диапазона от 0.0 до 1.0;
nDelay - забавяне в милисекунди (незадължителен аргумент, по подразбиране е 30).

Самото извикване на избледняване на прозрачност се извършва чрез методите fadeOpacity(sElemId, sRuleName), където sElemId е идентификаторът на елемента, а sRuleName е името на правилото. За да върнете прозрачността начално състояниеИзползва се методът fadeOpacity.back(sElemId).

:задръжте, за да промените лесно прозрачността

Ще отбележа също, че за проста промяна на прозрачността (но не и постепенна промяна), псевдо-селекторът :hover е подходящ, който ви позволява да дефинирате стилове за елемент, когато задържите курсора на мишката върху него.

a:hover img (filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; opacity: 0,3; )

Моля, обърнете внимание, че изображението е поставено вътре в елемент A. Факт е, че Internet Explorer до версия 6 разбира псевдо-селектора: hover само във връзка с връзки, а не с елементи, както трябва да бъде в CSS (ситуацията е коригиран в IE7).

Прозрачност и назъбен текст в IE

С пускането на Windows XP се появи cleartype anti-aliasing на екранни шрифтове, а с това и страничните ефекти в IE при използване на този метод за anti-aliasing. По отношение на нашия случай, ако прозрачността се приложи към елемент с текст, когато методът за изглаждане на ClearType е активиран, тогава текстът престава да се показва нормално (удебелен текст, например, се удвоява, различни артефакти също могат да се появят, например в под формата на тирета, назъбен текст). За да коригирате ситуацията, за IE трябва да зададете цвета на фона, CSS свойството background-color , на елемента, към който се прилага прозрачност. За щастие грешката е коригирана в IE7.

За да създадете прозрачен ефект в CSS, се използва свойството opacity.

IE8 и по-ранните версии поддържат алтернативно свойство - filter:alpha(opacity=x), където "x" може да варира от 0 до 100, колкото по-ниска е стойността, толкова по-прозрачен ще бъде елементът.

Всички останали браузъри поддържат стандартната непрозрачност на CSS свойството, което може да приема число от 0.0 до 1.0 като стойност, колкото по-ниска е стойността, толкова по-прозрачен ще бъде елементът:

Име на документа .myClass ( float: ляво; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*за IE8 и по-стари*/) Опитайте »

Прозрачност при задържане

Псевдо-клас: hover ви позволява да променяте външен виделементи, когато поставите курсора на мишката върху тях. Ще използваме тази функция, за да накараме изображението да загуби своята прозрачност, когато задържи курсора на мишката върху:

Заглавие на документа img ( float: ляво; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*за IE8 и по-стари*/) img:hover (opacity: 1.0; filter: alpha(opacity= 100); Опитайте »

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

Има две възможни начининаправете елемента прозрачен: свойството за непрозрачност, описано по-горе и указващо цвета на фона във формат RGBA.

Може би вече сте запознати с модела за представяне на цветовете RGB. RGB (Red, Green, Blue - червено, зелено, синьо) е цветова система, която определя нюанса чрез смесване на червено, зелено и синьо. Например, за да зададете цвета на текста на жълто, можете да използвате някоя от следните декларации:

Цвят: rgb(255,255,0); цвят: rgb(100%,100%,0);

Цветовете, посочени с помощта на RGB, ще се различават от шестнадесетичните стойности, които използвахме преди това, тъй като позволяват използването на алфа канал за прозрачност. Това означава, че през фона на елемент с алфа прозрачност ще се вижда това, което се намира под него.

Декларирането на RGBA цвят е подобно по синтаксис на стандартните RGB правила. Въпреки това ще трябва също така да декларираме стойността като RGBA (вместо RGB) и да посочим допълнителна десетична стойност на прозрачност след стойността на цвета между 0,0 (напълно прозрачен) и 1 (напълно непрозрачен).

Цвят: rgba(255,255,0,0.5); цвят: rgba(100%,100%,0,0.5);

Разликата между свойството opacity и свойството RGBA е, че свойството opacity прилага прозрачност към целия елемент, което означава, че цялото съдържание на елемента става прозрачно. И RGBA ви позволява да зададете прозрачност на отделни части на елемент (например само текст или фон):

Тяло (фоново изображение: url(img.jpg); ) .prim1 (ширина: 400px; поле: 30px 50px; цвят на фона: #ffffff; граница: 1px плътно черно; тегло на шрифта: получер; непрозрачност: 0,5; филтър : 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); фон: rgba(255,255,0,0.5);

Прочетете: