Как сделать фон через css
Перейти к содержимому

Как сделать фон через css

  • автор:

Как сделать фон из точек на css?

Я немного подредактировал заголовок, но возможно он не очень хорошо раскрывает суть, поэтому можете его улучшить. Предыдущий заголовок «Как сделать такой фон…» довольно безлик, так как поисковики не индексируют картинки. Обсуждение этой темы на мете.

28 июл 2017 в 3:25

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

.dotted

Отслеживать

ответ дан 28 июл 2017 в 3:54

22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак

Не очень похоже на исходный вариант, так как там массив точек. Я тоже пытался градиентами, но похоже это невозможно (разве что пытаться цветом фона сделать саму сетку, но если фон будет картинкой, то это не будет работать).

Фон по ширине (и только) div-а. Как сделать?

Нужно чтобы фон был 100 процентным по ширине, но не по высоте. Если блок выше исходника фона, то просто повторять фон background-repeat по вертикали.

Отслеживать
задан 1 фев 2017 в 19:51
65 8 8 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Укажите background-size 100% по ширине, a по высоте — auto

background-size: 100% auto; 

Отслеживать
ответ дан 1 фев 2017 в 20:34
9,730 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

Чтобы использовать фон на 100% ширины, надо прописать width: 100%; у блока div. НО, фон как background-image не будет виден, пока у блока нет никакой высоты. Так что, размер по-любому нужен для высоты(ты можешь его не указывать, если пишешь в блоке текст или добавляешь другие элементы).

background

Сокращённое CSS свойство background устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

Синтаксис

/* Использование свойства */ background: green; /* Использование свойств и */ background: url("test.jpg") repeat-y; /* Использование и */ background: border-box red; /* Одно изображение, центрированное и масштабированное */ background: no-repeat center/80% url("../img/image.png"); 

Примечание: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

Значения

Свойству можно указывать одно или более значений из данного списка в любом порядке:

Смотри background-size . Это свойство должно быть указано после , разделённого символом ‘/’.

Формальный синтаксис

background =
# (en-US) ? (en-US) ,

=
|| (en-US)
[ (en-US) / ] (en-US) ? (en-US) || (en-US)
|| (en-US)
|| (en-US)
|| (en-US)

=
|| (en-US)
[ (en-US) / ] (en-US) ? (en-US) || (en-US)
|| (en-US)
|| (en-US)
|| (en-US)
|| (en-US)

=
| (en-US)
none

=
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) ? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ? (en-US) ] (en-US)

=
[ (en-US) | (en-US) auto ] (en-US) (en-US) | (en-US)
cover | (en-US)
contain

=
repeat-x | (en-US)
repeat-y | (en-US)
[ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US) (en-US)

=
scroll | (en-US)
fixed | (en-US)
local

=
content-box | (en-US)
padding-box | (en-US)
border-box

=
| (en-US)
(en-US)

=
| (en-US)

=
| (en-US)

=
url( (en-US) * (en-US) ) | (en-US)

=
src( (en-US) * (en-US) )

Примеры

HTML

p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p> 

CSS

.warning  background: red; > .topbanner  background: url("starsolid.gif") #00d repeat-y fixed; > 

Как сделать прозрачный фон на css

Изменение прозрачности фона кажется простой задачей. В CSS есть свойство opacity, которое управляет прозрачностью. Но этот подход работает не всегда. Если нужно разместить, например, текст поверх картинки, то использовать opacity — не лучшее решение.

Давайте разбираться, в чем проблема с вроде бы подходящим свойством CSS и как изменить прозрачность фона картинки , чтобы не испортить внешний вид других частей интерфейса.

Наивный подход — использовать opacity

К вам приходит проджект-менеджер и показывает новый дизайн страницы облачные серверы . В нем есть такие облака. Задача — сделать их полупрозрачными, а сверху добавить текст.

Первая мысль — сделать прозрачный фон CSS с помощью opacity. Выглядит так, будто это оптимальное решение для поставленной задачи. Набросаем простую разметку и посмотрим, что из этого получится.

HTML:

Timeweb Cloud


CSS:
.cloud background-image: url(../images/cloud.png');
opacity: 1;
>

Свойство opacity принимает значение от 0 до 1, где 0 — полная прозрачность, а 1 — полная непрозрачность. Можно регулировать отображение с очень высокой точностью. Правда, на глаз разница заметна только при значительном изменении.

Сейчас результат выглядит так:

Выставили непрозрачность, выглядит нормально. Но в дизайне явно указано, что картинка должна быть полупрозрачной. Попробуем изменить значение opacity — например, 0.5 вместо 1. Облака должны стать немного светлее, насыщенность цветов ведь тоже изменится.

Вылезла проблема — вместе с фоновой картинкой начал исчезать текст с названием сервиса timeweb.cloud . В дизайне страницы такого нет. Более того, если сделать opacity: 0, то текст вообще исчезнет, как и облака под ним. Значит, это решение не подходит. Осталось разобраться, в чём причина такого поведения.

Объяснение простое. Проблема в том, что непрозрачность автоматически наследуется дочерними элементами. Нет свойства CSS, которое можно использовать для изменения непрозрачности только фонового изображения родителя. Возможно, оно появится когда-нибудь в будущем. Пока же нужны небольшие «костыли».

Мы поняли, что такое применение opacity для решения задачи не подходит. Для изменения прозрачности фонового изображения потребуется другой подход.

Гибкий подход — использовать псевдоэлемент

Чтобы решить задачу, нужно поместить фоновое изображение в дочерний элемент родителя. Это гарантирует, что облака и текст будут каждый на своем слое. А непрозрачность каждого слоя можно контролировать по отдельности. В теории это выглядит как то, что нам нужно для достижения эффекта, который отрисовал дизайнер.

Разметка останется такой же, а стили перепишем:

.cloud position: relative; 
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
>

.cloud::before <
content: "";
background-image: url('../images/cloud.png');
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.3;
>

.title position: relative;
top: 80px;
right: 50px;
>

Элемент .cloud получил свойство position: relative. Это нужно для того, чтобы относительно родителя позиционировать потомков — .cloud::before и .title. Потомки выстраиваются внутри родители с помощью флекса.

Чтобы сделать псевдоэлемент того же размера, что и родитель, необходимо задать ему абсолютное позиционирование. Верхнее, правое, нижнее и левое значения должны быть равны нулю, чтобы :before не схлопывался. У него также должно быть установлено свойство content, иначе он не будет отображаться на странице.

Тексту нужно установить position: relative, чтобы он был поверх наложения и картинки. Если вы не установите position явно, надпись будет скрыта под абсолютно позиционированным псевдоэлементом. Это позволяет добиваться разных интересных эффектов в интерфейсе. Но мы сейчас решаем другую задачу.

Посмотрим на результат. Теперь облака полупрозрачные, а текст — непрозрачный, как того и требует дизайн страницы.

Вместо .cloud::before можно добавить обычный HTML-элемент для фонового изображения CSS — например, ещё один div. Принципиально это ничего не изменит. Но использование псевдоэлементов помогает упростить структуру HTML и не плодить в разметке лишние сущности.

А в чём же гибкость этого подхода?

Мало того, что вы можете сделать из непрозрачного фона прозрачный без влияния на другие части дизайна, так ещё и получаете возможность дополнительно управлять цветом наложения. Для этого достаточно немного изменить стили.

Свойства background-image и background-size перенесём в стили .cloud. В стили .cloud::before добавим background-color: rgba(0,0,0,0.25). Должно получиться так:

.cloud position: relative; 
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../images/cloud.png');
background-size: cover;
>

.cloud::before <
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(256,256,256,0.75)
>

RGBA — это три основных цвета (Red, Green, Blue) плюс альфа-канал, который помогает управлять прозрачностью. Значение rgba(256,256,256,0.75) говорит о том, что мы наложили белую плашку с непрозрачностью 25%. Вместо белого можно применить любой другой цвет и получить интересный эффект наложения:

Какой способ выбрать — решайте сами. Если с цветами играть не придётся, то можно обойтись первым вариантом. Хотя кто знает, что в следующий раз придёт от дизайнера.

Заключение

Как мы увидели, свойство opacity всё-таки пригодилось. Правда, использовать его «в лоб» для изменения прозрачности не получится. Выход простой — добавить псевдоэлемент, который решит проблему с наследованием.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *