Как сделать размытие фона в CSS с помощью одной строки кода
От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.
Потому что размытия фона практически невозможно реализовать в веб-приложениях, поэтому дизайнеры чувствуют себя разочарованными, обманутыми и совершенно бесполезными. Но сегодня все меняется. Ну, на самом деле это изменилось еще в 2018 году или что-то около того, это только я что нашел страницу MDN, но вы поняли суть.
Итак, вот как создать размытие фона с помощью свойства CSS backdrop-filter.
Фон в CSS
Фон элемента HTML — это то, что появляется за текстом. Хотя CSS позволяет применять фон к элементу любого типа, он в основном используется для блочных элементов.
Фон применяется только к целевому элементу. Учитывая, что у большинства элементов HTML фон прозрачный, применение фона к будет выглядеть так, словно он применяется ко всем элементам.
background-color
Значение по умолчанию: transparent ; наследуется дочерними элементами: нет.
Так как мы уже рассмотрели разные способы определения цвета в CSS, применять цвет фона просто:
body
Весь элемент будет залит простым фоновым цветом. Имейте в виду, что всегда следует выбирать подходящий цвет текста, чтобы сохранить содержимое читабельным.
background-image
Поскольку простых цветов, как правило, недостаточно, CSS позволяет применять изображения в качестве фона элементов.
Для добавления фонового изображения требуется указать только его URL:
body < background-image: url(images/diagonal-pattern.png); >Поведение изображения (как оно повторяется, где расположено, какой у него размер) определяется другими свойствами фона. background-image задаёт только, какое изображение использовать.
Имейте в виду, что элемент HTML не принимает во внимание размеры фонового изображения. Даже если изображение больше, чем элемент, к которому оно применяется, элемент не изменит свои размеры, чтобы соответствовать изображению, поскольку изображение является чисто декоративным и оно здесь для поддержки элемента.
Разница между ![]()
и фоновыми изображениями
Элемент предназначен для изображений, которые являются частью содержимого, в то время как фоновые изображения в CSS чисто декоративные.
Логотип компании, эскизы галереи, изображение продукта и др. — всё это считается содержимым и для него следует использовать элемент .
Диагональный узор, красивый пейзаж, иконка корзины и др. — их можно рассматривать как декоративные, так как они поддерживают содержимое, но не являются его частью. Если бы они исчезли, у веб-страницы по-прежнему сохранится смысл.
Что касается многочисленных двойных выборов, граница между содержимым и стилем размыта. Некоторые визуальные методы легче достичь с помощью фона CSS. Просто спросите себя, важно ли для страницы изображение, которое вы используете. Если да, то применяйте элемент .
Градиенты
CSS также позволяет определять цветовые градиенты в качестве фонового изображения, двух различных видов:
- linear-gradient для градиентов в одном направлении, в прямоугольной форме;
- radial-gradient для градиентов во всех направлениях, в круговой форме.
Мы расскажем о градиентах позже. Единственное, что нужно сейчас знать — фоновые градиенты рассматриваются в качестве фонового изображения:
body
background-position
По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете указать исходное положение, выбрав горизонтальное значение х и вертикальное у.
Для каждой координаты вы можете использовать:
- значения в пикселях;
- проценты, относительно размеров элемента HTML;
- ключевые слова, такие как center , left , bottom и др.
body
Вы можете смешивать разные единицы координат:
body
background-repeat
По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете выбрать, чтобы оно повторялось только по горизонтали, только по вертикали или не повторялось вообще.
body < background-repeat: repeat-x; >/* Только по горизонтали */ body < background-repeat: repeat-y; >/* Только по вертикали */ body < background-repeat: no-repeat; >/* Фоновое изображение появится только один раз */Как заблюрить фон css
Чтобы заблюрить фон с помощью CSS, вы можете использовать свойство backdrop-filter . Это свойство позволяет добавлять размытие к заднему плану элемента, на котором оно применяется.
Например, если вы хотите заблюрить задний фон элемента div , вы можете использовать следующий код:
div backdrop-filter: blur(5px); > Здесь мы применяем размытие к заднему плану элемента div с помощью свойства backdrop-filter и устанавливаем радиус размытия в 5 пикселей с помощью функции blur() .
Как добавить фон на сайте?
и ничего не получается. Потом следовал правилам как поставить фон, там надо было создать index.html по пути Мое приложение/templates/Мое приложение/index.html и создать style.css по пути Мое приложение/static/Мое приложение/style.css и создать папку images в которой надо было хранить фотки для сайта.
Вообщем я не понимаю как поставить картинку на фон, просто изображение под тегом спокойно добавлялось (только надо было написать ).
Помогите пожалуйста!
Отслеживать
489 3 3 серебряных знака 11 11 бронзовых знаков
задан 12 авг 2020 в 15:51
688 4 4 серебряных знака 16 16 бронзовых знаков
Я уже писал это,не получалось
12 авг 2020 в 19:32
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Подключи CSS файл . И напиши следующее
body
Отслеживать
ответ дан 12 авг 2020 в 19:04
21 1 1 бронзовый знак
UPD:
В css файлах, в таком случае, позволяет поставить на фон изображение, что храниться в /media/ .
background-image: url("/media/images/projects/hookadoo.PNG"); /*фон установился*/ В settings.py пропиши:
STATIC_URL = '/static/' STATIC_ROOT = BASE_DIR / 'static/' MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media/' from django.conf import settings from django.conf.urls.static import static urlpatterns = [ # твой urlpatterns, ] if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) если используется #> Теперь в шаблоне обращайся к статике так .
Например, статика моего приложения лежит по такому пути D:\coding\my-site\polls\static\polls\plugins\jquery-1.11.3.min.js . Тогда её вызов будет следующим:
Так же перед запуском (в том числе в продакшене) используй python manage.py collectstatic .
Пример моего сайта-резюме.
Так же возможно будет полезной эта инструкция. Писал для себя по ходу дела.