Фоны, часть 1 / Формат PNG-24 [11/16]
×

Формат PNG-24 [11/16]

PNG-24 — отличнейший формат. Он хорошо подходит и для схем-чертежей-графиков-текста, и для сложных многоцветных изображений, т.к. поддерживает практически неограниченное количество цветов.

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

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

Давным-давно в IE была проблема с поддержкой полупрозрачных PNG, но в более поздних версиях IE (8+), таких проблем нет.

Сравните котика-PNG-8 с обводкой из предыдущего задания и котика-PNG-24 из этого задания. Особенно то, как выглядят их края на желтом блоке и блоке с градиентом.

Некоторые верстальщики перестают использовать PNG-8 и используют только PNG-24.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Формат PNG-24</title> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>
CSS
.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }
HTML Academy
  1. Задайте элементам с классом block фоновое изображение /assets/course13/cat_cage.png.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.