Opacity css color background: background-color — CSS: Cascading Style Sheets

Дружественное руководство по цвету фона CSS

Назад Дружественное руководство по цвету фона CSS

Дизайн HTML-страницы с использованием CSS предоставляет удивительное множество вариантов и идей для воплощения вашего творческого результата. Применение этого творчества с помощью цвета фона CSS — один из наиболее эффективных элементов набора инструментов CSS. Он является краеугольным камнем дизайна в CSS.

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

Синтаксис свойства фона CSS

Установка цвета фона CSS — довольно простая концепция. Для этого вам нужно будет вызвать свойство background выбранного вами селектора. В приведенном ниже примере кода вы увидите пример настройки для этого, поскольку он меняет цвет фона тела.

Примечание : Не забудьте добавить тире между «фоном» и «цветом», как показано ниже. Браузер не может интерпретировать свойство CSS, если оно не установлено как « цвет фона ».

    корпус { 
      фоновый цвет: синий; 
     }  

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

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

В другом примере этим также можно манипулировать с помощью свойства background-color. См. пример кода ниже.

    тело { 
       фоновый цвет: синий; 
     } 
    дел {
       фоновый цвет: белый; 
  }  

Здесь селектор div использовался с вызываемым свойством background-color. Значение цвета фона div было установлено на белый. После сохранения и перезагрузки HTML-файл выдает следующий результат в окне браузера.

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

Настройка цвета фона CSS с помощью шестнадцатеричных кодов

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

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

    тело { 
      фоновый цвет: #ff0000; 
     } 
    дел {
       фоновый цвет: белый; 
  } 
 

Здесь цвет фона CSS для элемента body был изменен с синего на шестнадцатеричный код « #ff0000 ». Это шестнадцатеричный код красного цвета, который обеспечивает следующий вывод на странице.

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

    тело { 
       фоновый цвет: #B97777; 
     } 
    дел {
       фоновый цвет: белый; 
  }  

Этот новый шестнадцатеричный код « #B9777 7» обеспечит следующий цвет фона CSS для HTML-страницы.

Настройка прозрачности и непрозрачности для цвета фона CSS

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

    корпус { 
       фоновый цвет: #C100AD; 
       непрозрачность: 1,0; 
     } 
    дел {
       фоновый цвет: белый; 
  }  

Обеспечивает следующий фоновый эффект.

Цвет фона, как показано на изображении выше, довольно непрозрачный. Это можно изменить, изменив значение свойства opacity. Допустимый диапазон для этого — от «0,0» до «1,0». Чем выше значение, тем выше непрозрачность. Соответственно, более низкое значение приводит к более прозрачному цвету. См. пример ниже, где значение непрозрачности было уменьшено до «0,2».

    тело { 
       фоновый цвет: #C100AD; 
       непрозрачность: 0,2; 
     } 
    дел {
       фоновый цвет: белый;  
  }  

Это выведет следующий уровень непрозрачности цвета фона для страницы.

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

Для этого можно использовать свойство « RGBA » вместо свойства непрозрачности. Аббревиатура RGBA означает значения красного, зеленого, синего и альфа-канала. В то время как значения цвета представляют фактические цвета, альфа-значение представляет собой значение непрозрачности. Он по-прежнему работает в том же диапазоне от «0,0» до «1,0».

В приведенном ниже примере кода значение цвета фона было установлено с помощью « background ” и примененные значения RGBA.

Примечание : Здесь используется свойство « background-color » , а НЕ .

   тело { 
       фон: rgba(240, 0, 168, 0,37)    
      } 
    дел {
       фоновый цвет: белый; 
        }  

Это обеспечит следующее изменение фона.

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

Примечание:   Не обязательно постоянно знать все шестнадцатеричные коды и значения RBGA наизусть. Их можно найти на нескольких онлайн-ресурсах, чтобы помочь вам установить идеальные цвета.

Не акцентируйте внимание на этом аспекте.

Опираясь на основы

Возможность работать со свойством цвета фона CSS — это мощный способ выделить сайт как в художественных, так и в навигационных целях. Однако это всего лишь пресловутая вершина айсберга того, что возможно с помощью CSS. Другие сильные инструменты в поясе включают настройку фоновых изображений, а также относительные настройки фона для сайта. Имея доступ к этим и многим другим параметрам, вы можете быстро получить очень компетентный трамплин для расширения дизайнерских возможностей. Когда дверь открыта для большего контроля, вы также открываете путь для творчества.

________________________________________________________________________________

Современный мир работает на коде, и этот код исходит от таких людей, как вы. Если вы хотите летать дальше и сильнее, чем когда-либо прежде, сделайте первые шаги с помощью кода. Изучение кода может помочь вам открыть двери для новых возможностей стать лучше. Получите степень Udacity Intro to Programming Nano сегодня, чтобы начать путешествие.

Начать обучение

[et_bloom_locked optin_id=»optin_4″]

[/et_bloom_locked]

Непрозрачность CSS — цвет фона

Нет ответа на этот вопрос. Будьте первыми, кто откликнется.

Ваш ответ

Связанные вопросы в CSS

Это побочный продукт градиента… ПОДРОБНЕЕ

ответил 1 июня 2022 г. в CSS к Эдурека • 11,930 баллов • 1303 просмотра

• CSS
• фон
• линейные градиенты

Граница атрибута может использоваться как … ПОДРОБНЕЕ

ответил 10 июня 2022 г. в CSS к Эдурека • 11 930 баллов • 301 просмотр

Вы можете изменить фоновое изображение div … ПОДРОБНЕЕ

ответил 10 июня 2022 г. в CSS к Эдурека • 11 930 баллов • 315 просмотров

• html
• CSS
• изображение
• фоновое изображение

Если вам нужна только настольная версия.

.. ПОДРОБНЕЕ

ответил 17 июня 2022 г. в CSS к Эдурека • 11,930 баллов • 481 просмотр

• CSS
• мобильный
• мобильное сафари
• фоновое изображение
• медиа-запросы

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