CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.
Изображения и их свойства в 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 пикселей. Здесь можно сделать более хитрую манипуляцию, можно задавать отступ от конкретного края, например:
- margin-top – отступ от верхней стороны
- margin-right – отступ от правой стороны
- margin-bottom – отступ от нижней стороны
- margin-left – отступ от левой стороны
Соответственно здесь вы можете настроить все более тонко, или же задать отступ всего от одной или двух сторон не трогая другие.
Рамка вокруг изображения
<!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 свойства изображения» заканчивается, я надеюсь этот урок был вам полезен и вдохновил на дальнейшее изучения языка и получение новых знаний.
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
