Размытие background
Хочу, чтобы фон страницы был размыт. Картинка задана как background-img. Как я понял, фильтры(filter css) можно накладывать только на картинки. ps. Не нашел нужного вопроса т.к. везде спрашивали про img тег.
Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 7 сен 2017 в 8:44
EpicLegend EpicLegend
55 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если применить blur к body , то размыто будет все содержимое страницы.
Чтобы этого избежать, можно вынести background в новый div с position:absolute , а весь остальной контент обернуть в другой div с position:relative и z-index выше, чем у блока с фоном:
.content < position: relative; z-index: 2; color: #fff; >.bg < position: absolute; z-index: 1; left: -10px; top: -10px; right: -10px; bottom: -10px; filter: blur(5px); background: url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/tropical_beach_paradise_5k_17484.jpg) no-repeat center; background-size: cover; > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Подскажите, как сделать затемнение фона? (полупрозрачным цветом)
Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:
header < height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; >Отслеживать
user212578
задан 3 мая 2017 в 8:19
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков
Возможный дубликат вопроса: как исключить применение стиля к дочерним селекторам CSS
12 фев 2018 в 19:04
8 ответов 8
Сортировка: Сброс на вариант по умолчанию
header < position: relative; background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; >header:after < content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 2; >.inner
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi. Отслеживать
ответ дан 3 мая 2017 в 12:28
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
Это ответ на ваш вопрос:
background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 3 янв 2018 в 16:52
Alisher Aidarkhanov Alisher Aidarkhanov
129 2 2 серебряных знака 7 7 бронзовых знаков
Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:
.header < position: relative; >.cover < background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; >.content
Отслеживать
ответ дан 3 мая 2017 в 11:21
307 5 5 серебряных знаков 13 13 бронзовых знаков
отличный простой вариант, но он затемняет и весь остальной контент, и z-index-ом почему-то не регулируется.
3 мая 2017 в 13:19
Отредактировал, думаю так понятней. Мы накладываем блок поверх.
3 мая 2017 в 16:45
Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.
background: url('../img/header/bg.jpg') no-repeat center /cover, #555555; background-blend-mode: hard-light;//или multiply
Можете хоть зелёной сделать. И ни где ничего не надо менять.
Linear-gradient(): линейный градиент в фоне
Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.
Как сделать фоновый линейный градиент в CSS
В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.
Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:
background-image: linear-gradient(to left, violet, red);
Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:
background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);
Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:
background-image: linear-gradient(-110deg, #ee82ee, #ff0000);
Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.
Несколько опорных точек
Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:
background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);
В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.
Длина переходов
По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:
background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);
В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .
Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.
Вендорные префиксы
Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:
- -webkit- — префикс для Chrome, Safari, Android;
- -moz- — префикс для Firefox;
- -o- — префикс для Opera.
Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:
background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);
Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.
Поддержка Internet Explorer
К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.
Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .
Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.
Как сделать фон в HTML
От автора: всех приветствую. Фоновые цвета и изображения в веб-дизайне имеют огромную роль, так как позволяют более привлекательно оформить любые элементы. Как сделать фон в html, мы рассмотрим сегодня.
Можно ли обойтись средствами html при задании фона?
Сразу скажу, что нет. Вообще html не создан для того, чтобы оформлять веб-страницы. Это просто очень неудобно. Например, там есть атрибут bgcolor, с помощью которого можно задавать фоновый цвет, но это очень неудобно.
Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.
Как задать фон через css?
Итак, прежде всего вам нужно определиться с тем, какому элементу нужно задать фон. То есть нам нужно найти селектор, к которому мы будем писать правило. Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д. Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.
После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.
Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.
background — color : #D4E6B3;
Я советую вам сейчас создать на рабочем столе html и css файлы, подключить css к html и повторять за мной. Так вы поймете все намного лучше, чем если просто читать. Для работы с файлами советую использовать программу Notepad++. Назовите первый файл, например index.html, а второй — style.css. Подключить css к html можно так:
Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.
Хорошо, а мы идем дальше. Чтобы показать вам другие возможности задания фона, мне придется создать небольшой блок, в котором мы и будем экспериментировать с фоновым изображением. Да-да, именно с изображением.
Картинка в качестве фона
В качестве картинки я буду использовать маленький значок языка html:
Создадим пустой блок с идентификатором:
Зададим ему явные размеры и фон:
width : 400px ;
height : 250px ;
background — image : url ( html . png ) ;
Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:
Чтобы задать картинку, вы должны после двоеточия написать ключевое слово url, а потом в круглых скобках указать путь к файлу. В данном случае путь указан исходя из того, что изображение лежит в той же папке, что и html-документ. Также нужно указать формат изображения.
Если вы сделали этого, а в блоке все равно не отображается фон, проверьте еще раз, правильно ли вы написали название картинки, правильно ли задан путь и расширение. Это самые частые причины того, что просто не выводится фон, так как браузер не может найти изображение.
Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:
Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;
Repeat-x – повторяется только по оис x;
Repeat-y – повторяется только по оси y;
No-repeat – не повторяется вообще;
Каждое значение вы можете прописать и посмотреть, что же случится. Я пропишу так:
background — repeat : repeat — x ;
Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.
Отлично, на этом уже можно заканчивать, так как это базовые возможности работы с фоном, но я вам покажу еще 2 свойства, которые позволяют получить вам больше возможностей в управлении.
С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.
Позиция фона
По умолчанию фоновое изображение, если для него не задано повторение, будет находиться в левом верхнем углу своего блока. Но положение можно легко изменить с помощью свойства background-position.
Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:
background — position : right top ;
То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:
background — position : 50 % 50 % ;
Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.
Ну и наконец, прописывать позицию можно в пикселях. Все то же самое, только вместо % будет px. В некоторых случаях может понадобиться и такое позиционирование.
Сокращенная запись
Согласитесь, что код получается достаточно громоздким, если все задавать так, как это делали мы. Получается, и путь к картинке нужно задать, и повторение, и позицию. Конечно, повторение и позиция не всегда необходимо, но в любом случае, более правильно будет использовать сокращенную запись свойства. Она выглядит так:
background : #333 url(bg.jpg) no-repeat 50% 50%;
То есть первым делом нужно записывать общий сплошной фоновый цвет, если это необходимо. Потом путь к изображению, повторение и позиция. Если какой-то параметр не нужен, то просто опускаем его. Согласитесь, так гораздо быстрее и удобнее, а еще мы существенно уменьшаем наш код. Вообще, я советую записывать сокращенно всегда, даже если нужно указать только цвет или картинку.
Далее мы рассмотрим другое свойство – размер фона. Его уже не задашь сокращенно в качестве параметров в сокращенной записи.
Управляем размером фоновой картинки
Наше текущее изображение не очень хорошо подходит для демонстрации следующего трюка, поэтому я возьму другое. По размерам она пусть будет как блок или больше его. Так вот, представьте, что перед вами стоит задача: сделать фоновую картинку так, чтобы она заполняла свой блок не полностью. А картинка, допустим, даже больше размеров блока.
Как можно поступить в таком случае? Конечно, самым простым и разумным вариантом будет просто уменьшение картинки, но не всегда есть возможность это сделать. Допустим, она лежит на сервере и в данный момент нет времени и возможности ее уменьшить. Проблему можно решить с помощью свойства background-size, которое можно назвать относительно новым и которое позволяет манипулировать размером фонового изображения, да и вообще любого фона.
Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:
background — size : 80 % 50 % ;
Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.
Как вы можете догадаться, также размер фона можно указывать в пикселях. Еще есть два ключевых слова-значения, которые также можно использовать:
Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.
Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.
Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.
Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.
В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.
Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится. Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину. Тогда на самых широких экранах она будет в своем натуральном размере, а на других просто будет потихоньку обрезаться, но при этом, при грамотном подборе фоновой картинки, на внешний вид сайта это не повлияет.
В общем, это всего лишь 1 пример того, как использовать знания, полученные вами в этой статье, при верстке реальных макетов.
Полупрозрачный фон с помощью css
Еще одна фишка, которую можно реализовать с помощью css – полупрозрачный фон. То есть через этот фон можно будет разглядеть, что находиться за ним.
Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.
Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);
Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.
Соответственно, для задания средней полупрозрачности нужно записать примерно так: