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

Как сделать фон на надписи в css

  • автор:

Фон для сайта CSS/HTML

Фон для сайта CSS/HTML

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

Как сделать фон для сайта CSS

Фон для сайта цветом можно сделать с помощью свойства background, применив его к тегу body. Таким же образом можно задать фон и другим элементам на сайте. Для примера, создадим div и применим к нему свойство background с цветом.

Пример

Lorem Ipsum

HTML

 
Lorem Ipsum

CSS

 .bg-ex-color < background: #a8d7e1; /* Цвет блока */ width: 100%; /* Ширина блока */ height: 350px; /* Высота блока */ >

Как сделать фон картинкой на весь экран CSS

Для того, чтобы сделать фон картинкой на весь экран, необходимо использовать свойство background-image. Чтобы картинка была на всю ширину фона, нужно в объявлении прописать значение cover. Для примера создадим div, а для фона сайта нужно прописать свойство к тегу body.

Пример

Lorem Ipsum

HTML

 
Lorem Ipsum

CSS

 .bg-ex-image < background-image: url(image.jpg); /* Путь к картинке */ background-size: cover; /* Растягиваем картинку по ширине */ background-repeat: no-repeat; /* Картинка фона без повторения */ background-position: center; /* Позиция фона по центру */ >

Как сделать фон размытым CSS

Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.

Пример

Lorem Ipsum

HTML

  
Lorem Ipsum

CSS для DIV

 .bg-ex-blur < position: relative; display: flex; justify-content: center; align-items: center; height: 350px; >.img-blur < position: absolute; z-index: 1; width: 100%; height: 350px; background: url(image.jpg); /* Путь к картинке */ background-repeat: no-repeat; background-size: cover; background-position: center; filter: blur(5px); /* Размытие картинки */ >.bg-ex-blur span

CSS-фон

Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

background-color

Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

Например, цвет фона всей страницы можно настроить так:

body

background-image

Устанавливает в качестве фона картинку. Если изображение подобрано правильно, то страница на его фоне будет выглядеть гораздо красивее, чем на фоне одноцветном.

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

Для одного и того же веб-элемента можно установить несколько фоновых рисунков. Для этого достаточно перечислить их все в свойстве background-image через запятую:

Body < background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); >

Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.

background-repeat

По умолчанию фоновое изображение, если его размер меньше размера элемента, будет заполнять объект полностью, повторяясь с левого верхнего к правому нижнему углу.

Фон мозайкой

Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:

  • repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
  • repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.

Фон в первом слое

  • repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.

Фон столбцом

  • no-repeat. Фон не будет повторяться вообще.

Фон без повторов

background-position

Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

background-position: 200px 350px;

Также картинку можно позиционировать зарезервированными словами.

  • Для горизонтального расположения используются слова left, center и right (по левому краю, по центру и по правому краю соответственно).
  • По вертикали положение задают значения top, center и bottom — позиционирование сверху, по центру и снизу.

Свойство background-repeat позволяет устанавливать в качестве фона несколько картинок и задавать правила так, чтобы изображения не накладывались друг на друга. Чтобы это сделать, достаточно перечислить пары координат для всех фоновых рисунков в одном правиле. Например, позиционировать три картинки можно так:

background-position: center left, 0% 50%, 800px 0px;

background-attachment

Определяет, будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет оставаться неподвижной. Значения могут быть такими:

  • fixed — фон зафиксирован.
  • scroll — фон разблокирован (прокручивается)
  • local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

background-attachment: fixed, scroll, local;

background-clip

Определяет, как фоновое изображение или цвет фона будут выводиться относительно границ элемента.

  • content-box — фон отображается только под содержимым.
  • border-box — выводится и под контентом, и под границами.
  • padding-box — отображается внутри границ.

Варианты отображения фона в пределах границ элемента

background-origin

То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

  • content-box — фон располагается относительно контента родительского элемента.
  • border-box — фон позиционируется относительно границы родителя, при этом рамки могут фон перекрывать.
  • padding-box — фон отображается до границ элемента-родителя, при этом границы на него не заходят.

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

  • cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
  • contain. Помещает изображение внутрь блока, сохраняет пропорции.

background

Позволяет объединить значения перечисленных свойств в одной строке:

background: url("background.jpg") center center / 100px 100px no-repeat content-box;

В примере между свойствами background-position и background-size стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как сделать фон в CSS

Как сделать фон в CSS

По умолчанию все браузеры отображают на страницах фон белого цвета. В арсенале вебмастера есть несколько десятков CSS правил для разнообразного оформления фонов.

Фон можно задать как для всей страницы (body), так и для отдельного элемента страницы. Давайте создадим блок и будем задавать ему разные варианты внешнего вида фона, добавляя к селектору bg_example разные CSS свойства.

.bg_example width: 400px;
height: 300px;
>

Это важно! Я не буду перечислять все возможные варианты записи CSS правил, а используемые верстальщиками в рабочих проектах (сокращенная запись).

Цвет фона в СSS

Цвет фона задается в виде шестнадцатеричного кода.

Как сделать фон в CSS.

Как сделать картинку фоном

В веб-дизайне существует три подхода с картинками:

размноженная маленькая текстурная картинка

background: url(bg_pattern.png);

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

Как сделать фон в CSS.

картинка фоном без повтора

background: url(icon.png) no-repeat;

no-repeat – без повтора

Классический пример – это иконка. Ничто не мешает вставить иконку на сайт тегом img, но по правилам SEO, так делать не нужно. Существует четкое разделение между контентом и дизайном. Так вот иконка – это украшательство и вставляется на сайт фоном. Изображения в галереях, каруселях, статьях, портфолио – это все контент.

Как сделать фон в CSS.

растянутая картинка на всю секцию или экран

Чтобы растянуть картинку на всю секцию с сохранением пропорций, применяют значение cover. Только нужно понимать, что размер оригинального изображения по ширине, не должен быть меньше размера самого большого монитора , 1920 пикселей. Иначе растягивание картинки приведет к потери её качества.

background: url(bg_full.jpg) no-repeat cover;

Как сделать фон в CSS.

Полупрозрачный фон на CSS

Эффект с полупрозрачным фоном чаще всего используют для затемнения фона. Поверх блока с фоновой картинки накладывается другой блок или псевдоэлемент с фоном темного цвета. Так, чтобы можно было увидеть, что находится под ним. Цвет задается в формате rgba, где последним параметром пишут значение прозрачности от 0 до 1.

background: rgba(0, 0, 0, 0.5);

Градиент фона в CSS

Элементы с фоновыми градиентами смотрятся симпатичнее, чем одноцветные. Мы создали линейный градиент с переходом от светло-розового цвета к розовому цвету и от правого верхнего угла к нижнему левому.

background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);

Как сделать фон в CSS.

Размытый фон

Эффект размытого фона хорошо виден на фотографии. Для наглядности размоем не весь фон, а какую-нибудь область на нем. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для лучшей кроссбраузерности. Однако для IE эта комбинация все равно не работает.

Как сделать фон в CSS.

bg-image background: url(‘kabachok.jpg’) no-repeat fixed center / cover;
position: relative;
>br
.block position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: inherit;
filter: blur(10px);
filter: url(#blur);
>

Заключение

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

Создано 16.09.2019 10:44:34

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Пример работы с CSS

    В этом примере мы рассмотрим, как можно изменить фон в каталоге. Первоначально каталог выглядит так:

    каталог 1

    Выбираем с помощью Firebug (кнопка F12) необходимый нам элемент:

    firebug 1

    Чтобы изменить фон этого элемента, скопируем нужный нам код и вставим его в редактор CSS, внеся необходимые изменения:

    код элемента

    Красной рамкой обведен код, который мы вставляем сейчас. После сохранения цвет фона элемента изменился на выбранный нами:

    замена цвета

    Пример 2. Изменение цвета кнопки.

    Изменим цвет кнопки «Обратный звонок». Мы хотим сделать так, чтобы изменился ее цвет до нажатия с оранжевого на изумрудный:

    кнопка

    Выбираем необходимый элемент:

    элемент 2

    Добавляем код, который изменяет цвет кнопки до нажатия:

    код кнопки 1

    И, нажав на кнопку «Сохранить», смотрим на результат:

    Результат

    Пример 3. Изменение шрифта.

    Теперь изменим шрифт кнопки «Корзина товаров». Выбираем нужный нам элемент, ищем нужный участок кода:

    шрифт

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

    код шрифта

    И видим, как изменилась кнопка «Корзина товаров»:

    кнопка 2

    Пример 4. Изменение стиля заголовков.

    При редактировании заголовков не появляется поле визуального редактора, и изменить их цвет, размер и шрифт можно только с помощью CSS. Итак, выбираем заголовки и видим, что у класса «h2_content» нет определенного готового правила.

    заголовки

    В этом случае нам необходимо самостоятельно сначала придумать необходимое правило к этому классу. Изменим цвет заголовков на зеленый, сделаем шрифт больше и курсивом:

    заголовки 2

    И после сохранения изменений посмотрим на изменившиеся заголовки:

    заголовки 3

    Пример 5. Изменение стиля ссылок.

    Ссылка может иметь несколько состояний. Например, есть посещенные и непосещенные ссылки, также можно задавать выделение ссылки курсором. Возьмем страницу с 3 ссылками, выделим ссылку курсором и в окне firebug в разделе «Стиль» нажмем на style.css?106(строка 165).

    ссылки 1

    Как только мы кликнем на эту ссылку, раскроется файл style.css на 165 строке, и мы сможем увидеть, как описаны правила ссылок.

    ссылки 2

    Псевдокласс link отвечает за непосещенные ссылки, visited — за посещенные. Псевдокласс hover срабатывает при наведении курсора. Изменим цвет непосещенных ссылок на зеленый, цвет посещенных — на красный, а при наведении цвет сделаем фиолетовым и уберем подчеркивание ссылки (за это отвечает правило text-decoration:none):

    ссылки 3

    Теперь ссылки внешне выглядят совершенно по-другому:

    ссылки 4

    Пример 6. Сдвиг и размер блоков.

    За расстояние между элементами отвечает правило margin, за расстояние между контентом элемента и его границей — padding. Изменить ширину блока можно с помощью правила width. Выберем элемент, который мы будем изменять:

    блоки страницы

    Теперь запишем следующие изменения: увеличим padding до 100 пикселей и установим отступ margin сверху и слева по 50 пикселей:

    блоки 2

    Внешний вид элемента станет таким:

    блоки 3

    Теперь изменим ширину элемента. Выделяем нужный элемент:

    ширина

    и добавляем измененное правило для класса .right_block — уменьшим его ширину width на 200 пикселей:

    ширина 2

    Теперь блок стал заметно уже:

    блок 4

    Пример 7. Рамки блоков.

    Вы можете изменять границу блоков с помощью правила border — например, задавать закругление с помощью border-radius. Также в данном примере рассмотрим, как добавлять тень к элементу с помощью box-shadow.

    рамки 1

    Поставим больше закругление у элемента — увеличим значение border-radius до 50 пикселей, саму границу сделаем жирнее (5 пикселей) и сделаем ее зеленой, также добавим черную тень снизу и справа с помощью box-shadow:

    рамки 2

    Окончательно элемент будет выглядеть так:

    рамка 3

    Пример 8. Скрыть элемент.

    Вы можете скрыть любой элемент с помощью правила display: none. В качестве примера скроем надпись в футере сайта:

    скрытие элемента

    Добавим в CSS-редактор правило для класса footer_text, изменив значение параметра display:

    скрытие

    Теперь выбранный текст из футера не будет виден пользователям:

    текст не виден

    Пример 9. Заменить логотип.

    Изначально в шаблонах прописан определенный размер логотипа, и, чтобы залить картинку больше, необходимо сначала скрыть существующий логотип и загрузить новое изображение с помощью background.

    Так логотип выглядел до изменений:

    изначальный шаблон

    Теперь вносим необходимые изменения. Новое изображение загрузите либо на ваш сайт, либо на сторонний фотохостинг и укажите ссылку оттуда.

    новый лого

    После внесения данных правил логотип выглядит следующим образом:

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

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