CSS3 #14 Фон (Background)
HTML-код
- Опубликовано: 11 янв 2021
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Это просто шикарно, всё ясно на из. Спасибо тебе большое.
Пожалуйста
Just what I needed, disciplined teaching and leaving almost no questions, except, why did you leave out background-size, in the background property, is size addable and also does the order matter?
как всегда все четко и полезно !!)) спасибо !!)) 😎👍
Пожалуйста
Полезный урок! Спасибо автору! ))
Спасибо за отзыв
Спасибо за интересные уроки👍 У меня такой вопрос, точнее 2 вопроса: 1) есть картинка на заднем фоне и на нем есть заголовок слева и кнопка справа. Как сделать так, чтобы яркость только картинки сделать темной, а яркость кнопки и заголовка оставить как есть? Я делаю через filter и в итоге они все меняются. Заголовок и кнопка находятся внутри разных div-ов и все поле обернуто в общий div, внутри которого и указаны background-image: url(), т.е. картинка.
2) Часто при работе с картинками возникает такая проблема, что добавляешь картинку и она не полностью отображается, т.е. нижняя часть идёт вниз и не видна. Скажи, пожалуйста, как сделать так, чтобы картинка оставалась на всю ширину и высоту нужного блока и при этом как-бы отдалилась от нас, чтобы все разделы были видны. Надеюсь, смог правильно донестти мысль)) Буду очень благодарен🙏
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
Спасибо за отличный урок)
Спасибо за отзыв
Очень приятно учиться!
Спасибо)
Background не включает в себя background-size, правильно? Размер нужно будет отдельно указывать?
А можно исправить то, что картинка съезжает внутри контейнера по оси-Х при изменении масштаба страницы? Мне нужно, чтобы она была в определённом месте на странице.
У меня сейчас "background: url(/img/woman_bg.png) 0% bottom no-repeat;"
Заранее спасибо) И спасибо за урок!
спасибо за большой труд!
Пожалуйста
Это то что мне нужно было! Хорош
Спасибо
Спасибо за труд!!!!
Пожалуйста
Шустро и внятно спасибо!
Пожалуйста)
сидел за пк 4 часа, и не кто не объяснил лучше тебя...Спасибо большое!
Пожалуйста
Вот теперь разобрался что это за штука такая background!!Спасибо!🧙♂️
Пожалуйста
Женя, как всегда супер уроки!
я так понимаю, что без прописания min height и width, вставить картинку/фон, через background url не получится, всмысле, что она не отображается, это обязательно прописывать, верно?
можно и так прописать:
* {
width 100%
height 100%
}
Но как будет лучше ? это же будут наследовать все блоки получается
Не обязательно вешать на все тэги через звёздочку, можно просто специфицировать конкретный тэг, типо main
@@YauhenKavalchuk понял, но получается, что без прописи ширины и высоты , ты не вставишь bg image url именно в div ,а в боди вставляется, всмысле отображается.
НО вот когда, я вставил bg image url, после пытаюсь bg position применить(параметры указаны верно center center), а она не сдвигается....в чем ошибка ???
и стоит ли лучше указывать бэкграунд картинку через img src?
Есть карусель из блоков, в каждом изображение и текст (подпись) на самой картинке. Знаю только два варианта: 1) bg img для блока, 2) использовать абсолютное позиционирование. Что лучше? И может быть есть ссылка на ресурс с подробным разбором?
Обычно, используют 2-й вариант. Только дополнительно на back-end создают функциональность возврата нескольких картинок
Добрый день, а как, допустим, управлять размерами двух разных картинок? background-size в общем применяется для обеих картинок. А если каждую в частности нужно изменить? В 5 применяемых атрибутов background, нет контроля размера. Спасибо
Добавлять уникальный класс для каждой обёртки и добавлять стили базируясь на классе
а если мы все пишем в одном Background, то порядок написания свойств имеет значение? и второй вопрос - Z index будет работать для смены уровней отображения изображений, или только изменением порядка написания это регулируется?
z-index применяется к элементам и никак не влияет на порядок отображения фона внутри них. Другое дело если для каждого элемента вы зададите собственный фон и будете один "поднимать" над другим
У меня вопрос. Можно ли сделать так, что бы одна картинка обтекала другую. Т.е. о чём речь. Пример по аналогии с американским флагом. Слева сверху идёт одна картинка маленького размера снизу справа вставляем маленькую картинку звезды и включаем повторение:
background: url(300x300.png) top left no-repeat, url(zvezda60x60.png) bottom right;
Получается. Но звёзды заходит под первую. А можно сделать так чтобы они были на одном уровне, звёзды доходят до 1 картинки и останавливаются, а не торчать из под неё ?
Надеюсь понятно изложил.
Ох, обычно эти делается по другому. Используются псевдоэлемены и дополнительные элементы в разметке. Чисто фоном это будет сделать проблематично
Thank you bro!
You’re welcome
Спасибо))
Пожалуйста
Если ограничения на размер фона? Я использую background - image: url("ссылка на изображение 2000на3600");
Фон не прогружается, не понимаю почему, подскажите пожалуйста
Не видя код, трудно что-то подсказать. Посмотрите в консоли - может проблема с путём
спасибо!!! со вчерашнего дня появилось куча рекламы... просто куча. до этого все было ок. так должно быть?
Понятия не имею что произошло, со своей стороны никаких изменений не вносил
Привет из 2024 года. Появился вопрос: вот я добавил нужное мне изображение на сайт, но он рисует его просто с белым фоном. На сайте присутствует фон, само изображение без фона, только нужная надпись. Что делать?
Без кода трудно помочь (
есть вк для связи немогу попрасту фон поставить банальный хотя css подключен и он работает тк на нём сделал 3d кнопки поомги пожалуйста
в описании есть елки на соц.сети
@@YauhenKavalchuk щяс посмотрю
А как сделать чтобы в одном файле работало сразу два? Как на ролике
Вообще не понял вопроса(
У меня не работает ключевое слово cover, фото всё равно обрезанное как и раньше
🤷♂️
как сделать четкий фон, у меня он немного в пикселях?
Видимо картинка плохого качества. CSS этим не управляет
а как фоновое изображение разместить фоном на всю стр но чтобы скролл не появился...
Это уже зависит не от фонового изображения, а от высоты элемента на который вы его вешает. Что бы растянуть его на всю высоту, добавляют min-height: 100vh;
@@YauhenKavalchuk спасибо))))
Какая тема у вас стоит? Как называется
Если мне не изменяет память material gecko
Обьясните мне кто-нибудь в этом мире, почему не подключается локальная фоновая картинка
Проверьте пути, имя файла и расширение. Один из этих трёх параметров не верный
@@YauhenKavalchuk Там все было верно, просто css хотел чтобы я прописал ../
Код читается сверху в низ и по идеи лес должен был перекрыть картину css.
Здесь не про то как читается документ, а про то в каком порядке свойство применяет фон
@@YauhenKavalchuk понял спасибо
и этот посмотрел. все понятно. всё записал 💾
👍
У меня не работает url
Значит не верно определили путь
Почему то все айтишники произносят none неправильно ... нон .. а на самом деле нан nʌn
Если вы так хорошо знаете английский, то почему не смотрите курсы на этом языке? Там вопросов к произношению у вас не будет)