Css background content: background — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

Как добавить фоновый цвет для ширины текста вместо ширины всего элемента ширина всего элемента. Вам также понадобятся свойства CSS.

В следующем примере у нас есть заголовок в

, внутри которого мы добавляем встроенный элемент (

). Следующим шагом является установка цвета фона для элемента .

Строковый элемент имеет такой же размер, как и его содержимое, и это решит проблему.

Пример установки цвета фона для ширины текста со встроенным элементом: 

 

  <голова>
    Название документа
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        цвет: #fff;
      }
      h2 диапазон {
        цвет фона: #43d9cf;
      }
    
  
  <тело>
    

      
Lorem Ipsum — это просто фиктивный текст

Попробуй сам »

Результат

Lorem Ipsum — просто фиктивный текст

Другой способ решить проблему — использовать для свойства отображения значение «таблица». Обратите внимание, что родительский элемент не требуется.

Пример установки цвета фона для ширины текста с отображением, установленным на «таблицу»: 

 

  <голова>
    Название документа
    <стиль>
      ч2 {
        дисплей: таблица;
        поле: 0px авто 0px авто;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #30cf52;
        цвет: #fff;
      }
    
  
  <тело>
     
Lorem Ipsum — это просто фиктивный текст

Попробуй сам »

В следующем примере требуется родительский элемент, поэтому мы используем элемент

в качестве контейнера. Здесь мы устанавливаем отображение на «inline-flex» для элемента

и выравнивание текста на «центр» для контейнера.

Пример установки цвета фона для ширины текста с отображением, установленным на «inline-flex»: 

 

  <голова>
    Название документа
    <стиль>
      . контейнер {
        выравнивание текста: по центру;
      }
      ч2 {
        дисплей: встроенный гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #4451b3;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст

Попробуй сам »

В следующем примере для отображения как контейнера, так и текста установлено значение «flex». Для контейнера мы также используем свойство justify-content со значением «центр».

Пример установки цвета фона для ширины текста с отображением, установленным на «flex»: 

 

  <голова>
  Название документа
    <стиль>
      .контейнер {
        дисплей: гибкий;
        выравнивание содержимого: по центру;
      }
      ч2 {
        дисплей: гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #000;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст

Попробуй сам »

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

Пример установки цвета фона для ширины текста с отображением, установленным на «блок»: 

 

  <голова>
    Название документа
    <стиль>
      .контейнер {
        дисплей: гибкий;
        выравнивание содержимого: по центру;
      }
      ч2 {
        дисплей: блок;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #000;
        цвет: #fff;
      }
    
 

  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст

Попробуй сам »

Растянуть фоновое изображение с помощью слоев CSS

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

Однако, если у вас есть причины не использовать этот метод, ознакомьтесь с приведенным ниже методом.

До того, как было изобретено свойство CSS background-size (или, по крайней мере, реализовано во всех основных браузерах), следующий метод был лучшим способом достижения эффекта «растянутого фонового изображения».

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

Код

Нет времени на объяснения? Без проблем! Вот код:

<голова>Растянутое фоновое изображение <тип стиля="текст/CSS"> /* Удалите поля из тегов ‘html’ и ‘body’ и убедитесь, что страница занимает всю высоту экрана */ html, тело {высота: 100%; маржа: 0; заполнение: 0;} /* Установите положение и размеры фонового изображения. */ #page-background {позиция: фиксированная; верх:0; слева:0; ширина:100%; высота:100%;} /* Укажите положение и слой содержимого, которое должно отображаться перед фоновым изображением. Должно иметь более высокое значение z-index, чем фоновое изображение. Также добавьте отступы, чтобы компенсировать удаление полей из тегов ‘html’ и ‘body’. */ # содержание {позиция: относительная; z-индекс: 1; отступ: 10 пикселей;}

<тело>
Улыбка
<дел>

Растяните это фоновое изображение!

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

Давай, попробуй — измени размер браузера!

Посмотреть результат

Обратите внимание, что этот код указывает всю HTML-страницу, поэтому для использования этого кода:

  1. Скопируйте и вставьте код в обычный пустой текстовый файл
  2. Сохраните файл с расширением «.html» (например, «index.html»)
  3. Измените код изображения, чтобы он указывал на ваше собственное изображение.

При просмотре файла в браузере фоновое изображение растягивается до размера окна браузера.

Объяснение

Начнем с обычных тегов для открытия HTML-документа:

w3.org/TR/html4/loose.dtd»> <голова>Растянутое фоновое изображение

Затем мы открываем тег

Итак, мы сделали все CSS, что нам нужно, правильно? ...НЕПРАВИЛЬНЫЙ!

Следующий код является специальным кодом, который мы используем только для Internet Explorer 6. Это связано с тем, что IE 6 не распознает наш предыдущий CSS.

Мы делаем это с помощью "условного комментария". Условный комментарий — это то, что распознают только браузеры Microsoft. Они позволяют нам указать отдельную таблицу стилей для каждой (или любой) версии IE.

А поскольку условные комментарии начинаются и заканчиваются как HTML-комментарии, другие браузеры просто игнорируют все, что между ними.

Итак, вот код для IE 6:

Затем мы закрываем и откройте тег

:

<тело>

Здесь мы указываем наш образ. Обратите внимание, что мы помещаем код изображения в тег

с идентификатором «page-background». Вы помните, что мы указали стили для «фона страницы» раньше — в нашей таблице стилей.