• Страница 1 из 1
  • 1
Добавить фоновое изображение с помощью CSS
Kosten
Вторник, 13 Февраля 2018, 20:17 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Иногда на сайте нужно сделать дизайн с применением изображение, который также будет для сайта адаптивен. Что здесь как можно подробнее разберем, как все можно не сложно создать. Для этого нам нужно только дин элемент под ссылку, что в стилистику поставим. А далее все уже выставлять и форматировать на стилях придется. Это самый простой способ изменить вид на портале и придать ему уникальность. Так как все таки не все еще на стилистике создается, что иногда можно подключить нарисованный элемент.

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

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

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



HTML

Код
<div class="zornet_ru_kersan">ZorNet: Создание сайта на uCoz</div>

CSS

Код
.zornet_ru_kersan {
    background-color: #6273bf;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 3px 1px 9px;
    width: auto;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    color: #f7f3f3;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/redblack.jpg);
    background-repeat: repeat;
    text-shadow: 0 1px 0 #0e0e0e;
}

Демонстрация:

Объяснение нескольких записей в вышеприведенном классе:

Ширина: для этого установлено значение авто, чтобы оно растягивалось на странице страницы или помещалось в другое подразделение.

Настройки шрифта: то должно быть понятно.

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

Background-repeat settings: Это просто говорит вашему браузеру повторить изображение в выбранной области.



Размер изображения составляет всего 2 × 20 пикселей, что помогает сократить время загрузки, поскольку мы будем повторять его на странице. Вы можете использовать любой желаемый размер. Этот метод можно использовать только для отображения узкой полосы на странице, но вы сможете добавить любой текст, который будет отображаться над повторным изображением.

PS - вы сами можете создать элемент под ссылку, что будет под палитрой цвета, что и подходит под ваш дизайн. И здесь уже идет редактирование, что шире сделать, смотря какой снимок следует. Если плоский, то здесь можно создавать как вам нужно. Но бывает с градиентом, что будет немного сложнее выставит, чтоб смотрелось красиво.
Прикрепления: 6705456.png (4.2 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: