Новости

Работа с картинками (изображениями) в CSS

05.09.2018

Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.

Я не буду здесь делать большое вступление, а приступлю сразу к делу.

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

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

или

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.

Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

Пример :

<html> <head> <title>Фон в CSS</title> <style> body { background: #000000 url(images/bg.gif); /* Цвет фона и путь к графическому файлу */ } </style> </head> <body> <p>Ваш текст</p> </body> </html>

или

<html> <head> <title>Фон в CSS</title> <style> body { background-image: url(images/bg.gif); /* Путь к графическому файлу */ background-color:#000000; /* Цвет фона */ } </style> </head> <body> <p>Ваш текст</p> </body> </html>

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

Значения :

repeat-y - повтор фонового изображения по оси - у (вертикаль);

repeat-x - повтор фонового изображения по оси - х ( горизонталь);

no-repeat; - запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Пример :

<html> <head> <title>Фон в CSS</title> <style> body { background-image: url(images/bg.gif); /* Путь к графическому файлу */ background-color:#000000; /* Цвет фона */ background-repeat: repeat-x; /* фон будет повторятся по оси-х (горизонтали) */ } </style> </head> <body> <p>Ваш текст</p> </body> </html>

или

<html> <head> <title>Фон в CSS</title> <style> body { background: #000000 url(images/bg.gif) repeat-x; /* Цвет фона, путь к графическому файлу и повтор фона по оси-х (горизонтали)*/ } </style> </head> <body> <p>Ваш текст</p> </body> </html>

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.

Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.

Зададим фоновое изображение к элементам — HTML и BODY.

Пример :

<html> <head> <title>Фон в CSS</title> <style> HTML { background: url(картинка-1) no-repeat bottom; /* Путь к графическому файлу с первым фоном, запрет на повтор картинки, прижать к низу части экрана */ } BODY { background: url(картинка-2) no-repeat top center; /* Путь к графическому файлу со вторым фоном, запрет на повтор картинки, прижать к верху по центру */ } </style> </head> <body> <p>Контент сайта</p> </body> </html>

Результат:

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Примеры :

метод 1:

<html> <head> <style> BODY { background: url(картинка.gif) no-repeat center; /* Путь к графическому файлу, запрет на повтор картинки и разместить по центру */ } </style> </head> <body> <p>Контент сайта</p> </body> </html>

метод 2:

<html> <head> <style> .imgCenter {text-align:center;} </style> </head> <body> <p>Текст параграфа.</p> <div class="imgCenter"> <img src="картинка.gif" border="0" width="300" height="300" alt="" /> </div> <p>Далее по тексту параграфа.</p> </body> </html>

метод 3:

<html> <head> <style> .center {display:block; margin:0 auto;} </style> </head> <body> <p>Текст параграфа.</p> <p>Текст параграфа. <img class="center" src="картинка.gif" border="0" width="300" height="300" alt="" /> Далее по тексту параграфа.</p> </body> </html>

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.

В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

background-size: 500px 200px;

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

можно так:

background-size: 200px;

а можно вот так:

background-size: 200px auto;

Пример :

<html> <head> <style> body { background:url(картинка.jpg); background-size:500px 200px; background-repeat:no-repeat; } </style> </head> <body> <p>текст сайта</p> </body> </html>

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки <IMG align=”right” …>, вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none ;

Значение :

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Пример :

<html> <head> <title>Обтекание</title> <style> .leftimg { float:left; /* Выравнивание по левому краю */ margin: 5px 5px 5px 0; /* Отступы вокруг картинки */ } .rightimg { float: right; /* Выравнивание по правому краю */ margin: 5px 0 5px 5px; /* Отступы вокруг картинки */ } </style> </head> <body> <h2>Основы CSS</h2> <p><img src="images/1.jpg" class="leftimg"> Приветствую всех читателей и случайных посетителей моего блога. Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS. CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в себе правила для группы или одиночного элемента. CSS используют для изменения внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</p> <h2>Основы CSS</h2> <p><img src="images/2.jpg" class="rightimg"> Давайте перейдем к основам CSS.CSS файл имеет расширение *.css. Часто веб-мастера присваивают CSS файлу имя style (style.css). CSS файл тесно связан с HTML. Другими словами, это можно объяснить так: CSS без HTML работать не будет. Предлагаю для общего понимания рассмотреть пример, как можно объединить HTML с CSS файлом.</p> </body> </html>

Здесь я указал отступы текста от картинки

margin: 5px 0 5px 5px;

Результат:

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. - inset - тень внутри элемента, без inset тень будет наружу;

2. - сдвиг тени по горизонтали (6px — вправо, -6px — влево);

3. - сдвиг по вертикали (6px — вниз, -6px — вверх);

4. - размытие тени (0 — четкая тень);

5. - растяжение тени (3px — растяжение, -3px — сжатие);

6. - цвет тени

box-shadow: 0 0 5px; - тень вокруг элемента

box-shadow: inset 0 0 5px; - тень внутри

Пример:

<html> <head> <title>Изображение</title> <style> img { box-shadow: -19px 0 22px -19px #000, 19px 0 22px -19px #000; } </style> </head> <body> <p><img src="картинка.jpg" alt=""></p> </body> </html>

Результат:

Прозрачность картинки.

Начну сразу с примера.

Пример:

<html> <head> </head> <body> <p>Обычное изображение:</p> <img src="картинка.png" width="300" height="200" /> <p>изображение с прозрачностью:</p> <img src="картинка.png" width="300" height="200" style="opacity:0.4;filter:alpha(opacity=40)" /> </body> </html>

Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

Результат:

С наилучшими пожеланиями Webmasterok2009

Новости

Работа с картинками (изображениями) в CSS

Фоновая картинка.

background | background-image

Повтор фоновой картинки.

background-repeat

Как добавить две фоновые картинки на веб-страницу.

background

Картинка по центру.

Как в css изменить размер картинки.

background-size

Обтекание (выравнивание) картинки текстом.

float

Тень картинки.

box-shadow

Прозрачность картинки.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий