Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Изображения и их свойства в CSS

Этот урок является своеобразным продолжением предыдущего, в котором мы рассматривали html работу с изображениями, теперь пора углубить ваши познания и посмотреть CSS свойства изображения.

Размеры изображения в CSS

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 .img {
width:200px;
height: 200px;
 }
</style>
</head>
<body>
<img src="proba.png" alt="Это изображение шляпы" class="img" />
</body>
</html>

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

Отступы от изображения

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 .img {
width:50px;
height: 50px;
margin: 20px;
 }
  .img1 {
width:50px;
height: 50px;
 }
</style>
</head>
<body>
<p>
<img src="proba.png" alt="Это изображение шляпы" class="img" /> Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать свойство margin которое даст вам возможность оценить его возможности. </p>
<p>
<img src="proba.png" alt="Это изображение шляпы" class="img1" /> Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать изображение без задания отступов чтобы вы наглядно могли увидеть разницу. </p>
</body>
</html>

В браузере мы видим следующее:

Отступы от изображения

Отступы от изображения в данном примере я сделал благодаря параметру margin который задал нам отступы от всех четырех краев по 20 пикселей. Здесь можно сделать более хитрую манипуляцию, можно задавать отступ от конкретного края, например:

Соответственно здесь вы можете настроить все более тонко, или же задать отступ всего от одной или двух сторон не трогая другие.

Рамка вокруг изображения

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 .img {
width:150px;
height: 150px;
border-width: 10px;
border-style: dotted;
border-color: #ff0000;
}
</style>
</head>
<body>
<img src="proba.png" alt="Это изображение шляпы" class="img" />
</body>
</html>

В браузере:

Рамка вокруг изображения

Задаем рамку вокруг изображения, благодаря параметру border для начала зададим ширину рамки с помощью border-width задаем её в пикселях, далее стиль рамки, то есть её вид border-style здесь есть несколько значений выбирать вам:

Виды рамок

И последний параметр, который мы будем регулировать это цвет рамки, который задается параметром border-color.

Изображение как фон

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
body {
background: url(proba.png);
}
</style>
</head>
<body>
</body>
</html>

В браузере видим:

Изображение как фон на сайте

Как вы поняли мы присвоили фон тегу body благодаря селектору тегов, так как он у нас занимает весь документ, так же мы можем присвоить и другим тегам. Параметр background сделал нам фон рисунком адрес к которому мы прописываем в скобочках. Так же можно и манипулировать с фоном например:

background: url(proba.png) repeat-x;

Фон будет повторяться только по оси X то есть горизонтально в одну линию.

background: url(proba.png) repeat-y;

Фон будет повторяться только по оси Y то есть вертикально в одну линию.

background: url(proba.png) no-repeat;

Фон не будет повторяться, а появится лишь одно изображение.

background-size: 500px 200px;

Это дополнительный параметр, который задает размер изображения для фона, ширина и высота.

Прозрачность изображения с помощью CSS

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 .img {
opacity: 0.5;
filter: alpha(Opacity=50);
}
</style>
</head>
<body>
<img src="proba.png" alt="Это изображение шляпы" class="img" />
<img src="proba.png" alt="Это изображение шляпы" />
</body>
</html>

В браузере видим следующее:

Прозрачность изображения

Это свойство пришло с появлением CSS3 и собственно получило достаточно обширное применение. Реализуется с помощью параметра opacity задает прозрачность изображения, значения от 0 до 1, а второй параметр filter: alpha(Opacity=50); делает тоже самое только для браузера Internet Explorier так как старые версии не поддерживают параметр opacity, значения от 0 до 100. В примере я специально сделал два изображения, чтобы наглядно было видно разницу.

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

Дата публикации:2014-04-22


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget