Dobar dan, štreberi web razvoja, kao i početnici. Za one koji ne prate IT trendove, odnosno web modu, želim vas svečano obavijestiti da je ova publikacija na temu: “Kako napraviti transparentan blok pomoću css alata” baš za vas. Zaista, u tekućoj 2016. godini, uvođenje različitih transparentnih objekata u online usluge smatra se stilskim potezom.

Stoga ću vam u ovom članku reći o svim postojećim metodama stvaranja transparentnosti, počevši od pretpotopnih rješenja, fokusirat ću se na kompatibilnost rješenja s pretraživačima, a također ću dati konkretne primjere programskog koda. A sad idemo na posao!

Metoda 1. Pretpotopna

Kada su još bili tamo slabih kompjutera a "sposobnosti" nisu razvijene, programeri su smislili svoj način stvaranja prozirne pozadine: koristeći prozirne piksele naizmjence sa obojenim. Ovako napravljen blok izgledao je kao šahovska tabla kada je skaliran, ali je u normalnoj veličini podsjećao na neku vrstu prozirnosti.

Ovo, po mom mišljenju, “štaka” svakako pomaže u starijim verzijama pretraživača u kojima moderna rješenja ne funkcionišu. Ali vrijedi napomenuti da je kvalitet prikaza teksta , upisan u takve, naglo pada.

Metoda 2. Ne smeta

U rijetkim slučajevima programeri rješavaju problem uvođenja prozirne slike umetanjem... gotove prozirne slike! U tu svrhu koriste se slike sačuvane u PNG-24 formatu. Ovaj grafički format vam omogućava da postavite 256 nivoa translucencije.

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

Međutim, ova metoda nije prikladna iz nekoliko razloga:

1. Internet Explorer 6 ne radi sa ovom tehnologijom, morate napisati skriptni kod za nju;
2. Ne možete promijeniti boje pozadine u css-u;
3. Ako je funkcija prikaza slike pretraživača onemogućena, ona će nestati.

Metoda 3. Promovirano

Najčešći i svi poznata metoda učiniti neki blok transparentnim je svojstvo neprozirnost.

Vrijednost parametra varira u rasponu, gdje je na 0 objekt nevidljiv, a na 1 je u potpunosti prikazan. Međutim, i ovdje ima nekoliko neugodnih trenutaka.

Prvo, svi podređeni elementi nasljeđuju transparentnost. To znači da će i uneseni tekst „prosjati“ zajedno sa pozadinom.

Drugo, Internet Explorer opet "vrće nos" i, do verzije 8, ne radi s njim neprozirnost.

Da biste riješili ovaj problem, koristite filter:alfa (Opacity=vrijednost).

Pogledajmo primjer.

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

Metoda 4. Moderna

Danas profesionalci koriste rgba (r, g, b, a) alat.

Ranije sam vam rekao da je RGB jedan od popularnih modela boja, gdje je R odgovoran za sve nijanse crvene, G za nijanse zelene i B za nijanse plave.

U slučaju css parametra, varijabla A je odgovorna za alfa kanal, koji je zauzvrat odgovoran za transparentnost.

Glavna prednost potonje metode je da alfa kanal ne utječe na objekte koji se nalaze unutar stiliziranog bloka.

rgba(r, g, b, a) je podržan počevši od:

• Opera verzija 10;
• Internet Explorer 9;
• Safari 3.2;
• 3 verzije Firefoxa.

Želim napomenuti zanimljiva činjenica! Omiljeni Internet Explorer 7 daje grešku prilikom kombinovanja svojstava boja pozadine sa nazivom boja (boja pozadine: zlatna). Stoga treba koristiti samo:

boja pozadine: rgba (255, 215, 0, 0.15)

A sada primjer.

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

U našoj radnji ćete naći sve vrste cveća.

Imajte na umu da je tekstualni sadržaj bloka u potpunosti vidljiv (100% crn), dok je pozadina postavljena na alfa kanal od 0,88, tj. 88%.

Ovim se završava publikacija. Pretplatite se na moj blog i ne zaboravite pozvati prijatelje. Želim vam puno sreće u učenju web jezika! Bye bye!

Transparentnost pozadine na sajtu se kreira preko CSS svojstava. Transparentnost možete postići na dva načina: kroz svojstvo neprozirnosti i background:rgba(). Pogledajmo svaki od njih i onda napravimo poređenje.

1. CSS svojstvo neprozirnosti za transparentnost pozadine

CSS ima svojstvo neprozirnosti, koje se može koristiti za postavljanje transparentnosti slika, tekstova, uključujući pozadinu.

Transparentnost se može postaviti jednostavnim navođenjem pravi broj od 0,0 do 1,0. Što je manji broj, objekt će biti manje uočljiv.

neprozirnost: 0,5; // Translucency neprozirnost: 0,2; // Objekt je vidljiv samo 20%. neprozirnost: 0,8; // Objekt je vidljiv samo 80%.

Pogledajmo primjer sa svojstvom neprozirnosti.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

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

Давайте разберемся, как можно сделать прозрачный фон для картинки с помощью редактора Adobe Photoshop . У меня установлена англоязычная версия Adobe Photoshop CS5, поэтому показывать буду на нем.

Постараюсь приводить различные сочетания горячих клавиш.

Если у Вас еще не установлен фотошоп, Вы им очень редко пользуетесь или он на английском, можете сделать прозрачный фон в Paint.net. Это простой русскоязычный редактор изображений, который займет не много места на жестком диске. Перейдя по ссылке, Вы можете прочесть подробную статью. Скачать программу Paint.net можно с нашего сайта.

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

Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой», нажмите в нем «ОК». После этого замочек исчезнет.

Выбираем инструмент «Волшебная палочка». В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D».

Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete».

Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D».

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

В этом случае, воспользуемся инструментом «Быстрое выделение». Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.

Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

Для просмотра результата нажмите «Q». Розовым будут выделены те части изображения, которые станут прозрачными.

Копируем выделенные области, нажав «Ctrl+C». Дальше создаем новый файл, «Ctrl+N», с прозрачным фоном.

Вставляем в него скопированные фрагменты, «Ctrl+V». Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик». Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

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

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

Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

1. Свойство CSS opacity для прозрачности фона

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

Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

opacity: 0.5; // Полупрозрачностьopacity: 0.2; // Объект виден только на 20%opacity: 0.8; // Объект виден только на 80%

Давайте рассмотрим пример со свойством opacity.

Tekst je takođe transparentan