Добавление изображений в CSS

Опубликовано автором

Обычно, для того чтобы показать изображение пользователю используется тег <img…> в котором прописывается путь к изображению <img src="/path/to/img.jpg">, но для создания оформления страницы удобнее использовать CSS стили для HTML элементов.

Добавляем изображение в CSS с помощью свойства background-image

Для того, чтобы добавить изображение как фон html элемента, добавим стиль:

div.with-background {
    background-image: url(/path/to/img.jpg); /* Путь к фоновому изображению */
}

Подробнее можно прочитать в лучшем CSS справочнике рунета http://htmlbook.ru/css/background-image, а цель статьи — добавить изображение в CSS без закачки его на сервер.

Кодируем изображение в base64 и добавляем его в CSS с помощью свойства background-image

В некоторых случаях, когда изображения не большие, удобнее не закачивать их на сервер, а прямо добавить изображение в CSS, „перекодировав“ его в base64:

div.with-background {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAA… … …);
}

Перекодировать в base64 для добавления в CSS

Можно воспользоваться множеством онлайн сервисов, например http://www.base64-image.de/

Или написать свой скрипт кодирующий в base64

Перекодировать файл изображения в строку base64 можно с помощью, например, php функции base64_encode():

<form target="_self" method="post" enctype="multipart/form-data">
<input type="file" name="file1"><input type="submit" name="submit" value="submit">
</form>
<?php
if (isset($_POST['submit'])) {
	if (is_uploaded_file($_FILES["file1"]['tmp_name'])) {
		$folder = $_SERVER['DOCUMENT_ROOT']."/";
		move_uploaded_file($_FILES["file1"]['tmp_name'], $folder."test.png");
		$file = "test.png";
		if($fp = fopen($file,"rb", 0)) {
			$picture = fread($fp,filesize($file));
			fclose($fp);
			$base64 = base64_encode($picture);
			echo $base64;
		}
	}
}
?>

Ну и добавить получившуюся строку в CSS:

background-image: url('data:image/png;base64,iVBORw0KGgoA… … …lFTkSuQmCC');

источник

Просмотры: 145