How to Apply CSS Opacity to Background Color Only?

The CSS opacity property is a great way to set a low opacity on HTML elements making the entire element semi-transparent including all of its children. But what if we only wish to set the opacity on the background color whilst keeping the content (such as text and images) opaque? Here are a few ways to accomplish that:

Set Background Color Opacity Using Alpha Channel Color Notations

We can use the following CSS3 alpha channel color functional notations to set the background color to a lower opacity:

Using the RGBA (Red-Green-Blue-Alpha) Model:

Syntax:

background-color: rgba(red, green, blue, alpha);

Where the values of each color in RGB can be an integer between 0-255 or a percentage value from 0-100%, and the value of Alpha can be a number between 0-1.

Examples:

rgba(0, 0, 255, 0) /* transparent */ rgba(0, 0, 255, 0.5) /* 50% opaque blue */ rgba(0, 0, 255, 1) /* fully opaque blue */

Using the HSLA (Hue-Saturation-Lightness-Alpha) Model:

Syntax:

background-color: hsla(hue, saturation, lightness, alpha);

Where the possible values of the HSLA color notation are:

• Hue: specified in degrees (imagine a color wheel) where:
  • 0° – red
  • 60° – yellow
  • 120° – green
  • 180° – turquoise
  • 240° – blue
  • 300° – pink
  • 360° – red

  Examples:

  hsla(240, 100%, 50%, 0) /* transparent */ hsla(240, 100%, 50%, 0.5) /* 50% opaque blue */ hsla(240, 100%, 50%, 1) /* fully opaque blue */

  Use a Lower Opacity CSS Pseudo Element to Create a Colored Background Layer

  Let’s suppose you have the following elements; a content child element nested inside a parent element:

  With a structure like that, you can create a background layer (having no content) via CSS pseudo elements like so:

  #parent::after < content: ''; >

  Now you can make the background layer the same size as the parent div and position it relative to the parent like so:

  You should now see a pink colored background layer with an opacity of 50% that only applies to the background color and not the content.

  Following is a quick explanation of how the generated content (our background layer) is styled:

  • To generate empty/invisible content we can simply set the content property’s value to an empty string or a space character.
  • Setting width and height to 100% ensures the generated content is of the same size as the parent element.
  • Setting a lower opacity makes the background layer transparent.
  • position: relative on the parent element and position: absolute on the generated content ensures the generated content is positioned relative to the parent.
  • Setting left: 0 and top: 0 ensures the generated content is positioned to the top left edge of the parent element.
  • Setting a negative z-index value ensures the generated content recedes to the background and all child element content appears above it.

  If the parent element has a background color of its own, then you can set a positive z-index value on the generated content (the background layer) and a higher z-index value on the child element along with relative positioning like so:

  #parent < height: 45px; background-color: yellow; position: relative; >#parent::after < content: ''; width: 100%; height: 100%; background-color: pink; opacity: 0.5; position: absolute; top: 0; left: 0; z-index: 1; > #child position: relative; z-index: 2;>

  Hope you found this post useful. It was published 31 May, 2016 (and was last revised 31 May, 2020 ). Please show your love and support by sharing this post.

  Источник

  background-color

  The background-color CSS property sets the background color of an element.

  Try it

  Syntax

  /* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset; 

  The background-color property is specified as a single value.

  Values

  The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

  Accessibility concerns

  It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

  Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

  Formal definition

  Formal syntax

  Examples

  HTML

  div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv> 

  CSS

  .exampleone  background-color: transparent; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; > 

  Result

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See also

  Found a content problem with this page?

  This page was last modified on Feb 20, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Set Background Opacity in CSS

  

  1. Use the opacity Property to Create a Transparent Color in CSS
  2. Use the rgba() Function to Create Transparent Color in CSS
  3. Use Hex Values to Create a Transparent Color in CSS

  In this article, we will introduce three methods to create transparent color in HTML using CSS. It will set the background opacity in CSS.

  Use the opacity Property to Create a Transparent Color in CSS

  The opacity is one of the properties used in CSS, especially with the colors. We can use values between 0 to 1 to show the opacity of color or an element. If the value is 1 , it means the color is 100% opaque. It means the color is not transparent at all. If we decrease the value initially, the element will get more transparent. If the opacity value is 0.5 , the color will get semi-transparent or 50% transparent. However, while using opacity , the child element also gets transparent.

  For example, create an HTML document with a heading h1 and a class transparent . Set the background-color as #cc33ff and opacity value 0.4 after selecting the transparent class in CSS. If we want the heading and its background color to get more transparent, we can decrease opacity value.

  The example below shows that the background color and the heading h1 get transparent as we keep the opacity value, i.e. 0.4 .

  h1 class="transparent"> Hello world h1> 

  .transparent  background-color: #cc33ff;  opacity: 0.4; > 

  Use the rgba() Function to Create Transparent Color in CSS

  The rgba() function defines colors using the red-green-blue-alpha model. The rbg in the rbga() function signifies color values for red, green, and blue, while a signifies the opacity of the color. Each parameter (red, blue, green) defines the intensity of color between 0-255 . Whereas the value of a has to be between 0-1 . For example rgba(255, 100, 100, 0.4) . The lesser the value of a , the more transparent the color will be. The child element does not get transparent, unlike that of the opacity property. If the value of a is 0.5 , the color will be semi-transparent or 50% transparent.

  For example, create an HTML document with heading h1 and class transparent . Write the text Hello World between the heading tag. Use the rgba() function to give them background color to the class. Put the rgba value as rgba(255, 100, 100, 0.4) . Decrease the value of a to make it more transparent and increase the value of a to make it more opaque.

  The example below shows that the background color of the heading gets transparent as we put the value of a as 0.4 . However, the child element heading does not get transparent.

  h1 class="transparent"> Hello world h1> 

  .transparent  background-color: rgba(255, 100, 100, 0.4); > 

  Use Hex Values to Create a Transparent Color in CSS

  We often use hex values with six characters followed by # to give a specific color to an HTML element. For example, #A5BE32 . We can make the color transparent by adding two numeric values at the end of the hex value and making it an eight-character hex value. For example, #A5BE3280 . Here, #A5BE32 denotes the color, and 80 at the end denotes the opacity of the color. If you want a 50% transparent color, you can use the value 80 at the end of the hex code. Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128 , which converted to hex becomes 80 . The child element does not get transparent, unlike that of the opacity property.

  For example, create an HTML document with heading h1 and class transparent , i.e

  Hello world

  . Give #A5BE32 background color to the class. Add 80 at the end of the hex code to make it 50% transparent. Such that the hex code becomes #A5BE3280 .

  The example below shows that the background color of the heading gets 50% transparent as we add 80 at the end of the hex code.

  h1 class="transparent"> Hello world h1> 

  .transparent  background-color: #A5BE3280 > 

  Источник

  Читайте также:  What is bind variable in java