Методи за получаване на прозрачен фон в блокове CSS, vaden про

Предишен ◈ Следващото

Искате ли да научите как да създадете страници с уникален и колоритен модерен дизайн? Използването на полупрозрачни елементи могат да ви помогнат с тази трудна задача. Днес ще разгледаме основните практически начина за определяне на прозрачността на конструктивните елементи.







Методи за получаване на прозрачен фон в блокове CSS, vaden про

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

Ако разгледаме тази тема в контекста на историческото развитие на уеб-базирана технология, ние можем да се разграничи от следните подходи:

  • Имотът е непрозрачност.
  • Използването PNG -kartinki
  • система формат RGBA
  • Е, най-накрая, античността или карирана изображение.

CSS собственост непрозрачност

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

Резултатът е прозрачна блок:

Методи за получаване на прозрачен фон в блокове CSS, vaden про

  1. Непрозрачност заема стойности в диапазона: 0 (напълно прозрачен) - 1 (непрозрачна).
  2. Cross-браузър. В IE версии до и включително седмия непрозрачността не се поддържа. Постигане на същия дисплей елемент ще помогне на следния ред:

Трябва да се вземе предвид фактът, че един филтър имот не съществува в HTML спецификации, променете стойността от 1 до 100 и може да се прилага единствено по отношение на елементи:

  • абсолютно позициониране (позиции: абсолютно)
  • фиксиран линеен размер (височина или широчина).
  • Степента на прозрачност е наследен от дъщерните елементи, с него можете да увеличите дете елемент на прозрачност, но не по-малко - това е невъзможно. Д. На полу-прозрачен фон не е прозрачен текст направя.

    • За да се разбере по-добре последната точка на материала, в предишния пример, ние се определи цвета на текста бяло

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

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

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







    Използването PNG -kartinki

    Интересна особеност на формата PNG е, че тя разполага с 256 нива на прозрачност. Мисля, че сте хванали влака на мисълта, и вероятно вече изграден алгоритъм на този подход. Имам само гласа му.

    1. Създаване на Photoshop. един цвят полупрозрачно изображение (нека го наречем прозрачен) и го запишете в PNG формат.

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

  • Използвайте го като фон:

    Резултатът е единица с прозрачен фон и непрозрачна съдържание:

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

    1. За разлика от непрозрачността на непрозрачност имот е даден само за фона
    2. Cross-браузър. Тя работи в почти всички браузъри, а това е плюс. Но PNG прозрачност не се поддържа в IE6. Ако оптимизирате сайта си за този древен - трябва да използвате други методи или скриптове.
    3. Когато деактивирате показването на изображения, фон, ще бъдат загубени (имайте предвид този момент в оптимизиране на дисплея на мобилни устройства, тъй като неограничен интернет не винаги е под ръка).
    4. За да промените цвета и / или степента на прозрачност, което трябва да се създаде нов имидж и го perezalit да сърв.

    система формат RGBA

    Един от най-съвременните методи за промяна transparantnosti фон е да се използва RGBA система.

    RGBA - цвят представителство система с три канала на стандартната RGB (червено, зелено, синьо) и четвърти, така наречените Alpha -канал характеризира степента на прозрачност.

    В вече ни е пример замените съдържанието в CSS файла до следното:

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

    1. За разлика от непрозрачността на непрозрачност сграда, разположена само на заден план
    2. За разлика от метода на PNG изображения, промяна на цвета или прозрачността, ние просто трябва да промените RGBA ценности.
    3. Cross-браузър. Работи във всички съвременни браузъри (започващи с IE9. OP10. Fx3, Sf3.2) .За по-стари браузъри или ще трябва да жертват прозрачност, или да използвате непрозрачност. PNG методи.

    Plaid изображение или по отношение на историята на

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

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

    В резултат на тази картина като фон получи псевдо-прозрачен фон.

    Методи за получаване на прозрачен фон в блокове CSS, vaden про

    За да обобщим?

    И накрая, някои общи насоки за използването на прозрачност в своите проекти:

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

    7 оценки (средно с 5 от 5)







    • Предишен ◈ Следващото