В этой части учебнике вы узнаете как происходит работа с фоном в CSS, ну и конечно с изображением.
Свойства CSS для фона:
Для начала рассмотрим какие свойства нужно применять для работы с фоном, также надо предупредить, что большая часть свойств, они направленны для работы с изображением.
- background-color — Определяет цвет фона;
- background-image — Назначает фоновое изображение;
- background-size — Масштабирует картинку;
- background-position — Задаёт начальное значение изображению;
- background-origin — определяет область позиционирования фонового рисунка;
- background-repeat — Повторение картинки;
Если с первым всё понятно, просто меняет цвет, то с остальными посложнее.
CSS работа с изображениями:
Перейдём сразу к работе с изображением, для этого надо создать блок.
1 | <div class="img"></div> |
Как видите тут просто один блок, теперь покажу как установить картинку фоном в CSS.
1 2 3 4 5 | .img { width: 400px; height: 400px; background-image: url("cat-1046544_1920.jpg"); } |
Про ширину и высоту вы уже знаете, но про background-image нет, как можете заметить, в качестве значения оно использует конструктор url(), внутри него путь до картинки, вот результат.
Тут стоит сказать что это не картинка такая, а она просто очень большая и поэтому не влезает во весь блок, что бы это изменить можно использовать background-size.
1 2 3 4 5 6 7 | .img { width: 400px; height: 400px; background-image: url("cat-1046544_1920.jpg"); background-size: cover; background-position: center; } |
Я добавил свойство background-size и background-position, первое для того что бы картинка адаптировалась, а второе что бы она была по центру, иначе же, она будет не много в бок.
Как видите картинка нормально отображается, так как надо.
Ещё один пример:
Перейдём ещё к одному примеру, только уже посмотрим кое что другое.
1 2 3 4 5 | .img { width: 400px; height: 400px; background-image: url("books.png"); } |
То есть, единственное что поменял, это картинку, вот результат.
Как можете понять, тут проблема в том, что картинка повторяется, поэтому, я сейчас покажу как убрать повторение картинки в CSS.
1 2 3 4 5 6 7 | .img { width: 400px; height: 400px; background-image: url("books.png"); background-position: center; background-repeat: no-repeat; } |
Я добавили свойство background-repeat, со значением no-repeat, что значит убрать повторение, также сделал что бы картинка отображалась по середине.
Всё работает так как я сказал, что очень хорошо.
Вывод:
В этой части учебника мы разобрали работа с фоном и изображениями в CSS, но тут были рассмотрены самые популярны способы применения их.
Подписываетесь на соц-сети:
Оценка:
Загрузка...