модуль #5. урок #1
вводный
Рассмотрим какой ChatGPT использовать, научимся составлять запросы, поймём в принципе чем он может нам помочь при работе со стандартными блоками и CSS
1. Используя попап BF502N наложить на его фон паттерн из любой картинки
2. Используя блок AB104 добавить ему любое фоновое изображение с соотношением сторон 1:1 таким образом, чтобы изображение поместилось полностью в блоке, также чтобы изображение не повторялось и было смещено к правой стороне блока
3. Продублировать блок, который использовался выше и также для него использовать те же свойства, только изображение теперь должно полностью залить весь блок и прилипнуть к правой и верхней сторонам
2. Используя блок AB104 добавить ему любое фоновое изображение с соотношением сторон 1:1 таким образом, чтобы изображение поместилось полностью в блоке, также чтобы изображение не повторялось и было смещено к правой стороне блока
3. Продублировать блок, который использовался выше и также для него использовать те же свойства, только изображение теперь должно полностью залить весь блок и прилипнуть к правой и верхней сторонам
Для более удобного взаимодействия с кодом я буду делиться ссылкам на различные гайды, сервисы и ресурсы. Это поможет немного упростить работу и найти новые решения
Я буду дублировать часть кода и его свойства сюда, на тот случай, если вы забыли какое-то значение или как оно пишется
Сдать домашнюю работу
Для этого тарифа нет возможности сдать домашнюю работу
<style>
/*Загрузка фотографии*/
background-image:url("адрес-картинки");
/*Повторение изображения*/
background-repeat: repeat; /*повторяется*/
background-repeat: no-repeat; /*не повторяется*/
background-repeat: repeat-x; /*повторяется по горизонтали*/
background-repeat: repeat-y; /*повторяется по вертикали*/
/*Размер фонового изображения*/
background-size: contain; /*изображение полностью помещается в элемент*/
background-size; cover; /*изображение заливает полностью элемент */
/*Позиционирование изображение*/
background-position: bottom right; /*left, right, top, bottom*/
background-position: 100% 100%; /*от 0% до 100%*/
background-position: 10px 150px; /*значение в пикселях*/
/*Прокручивание фона*/
background-attachment: fixed; /*фон фиксируется и не прокручивается вместе с элементом*/
background-attachment: scroll; /*значение по умолчанию*/
/*Градиент*/
background-image: linear-gradient(-30deg, #2E9AFF, #F498AD);
background-image: radial-gradient(circle, #09ff00, red);
/*Цвет фона*/
background-color: pink;
background-color: rgb(255 221 36);
background-color: #232323;
background-color: rgb(255 255 0 / 0.5); /*Прозрачность цвета*/
/*Фон для текста*/
background-clip: text; /*необходимо прописать, чтобы работало фоновое изображение вместо текста*/
color: transparent; /*необходимо прописать, чтобы работало фоновое изображение вместо текста*/
</style> 