How to set transparency color in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set transparency color in css

青灯夜游

Apr 14, 2021 pm 07:05 PM

csstransparency

Method: 1. Use the RGBA() function to generate various colors using the superposition of red, green, blue and transparency. The syntax is "rgba(red, green, blue, transparency)"; 2 , use the HSLA() function to define colors using hue, saturation, brightness, and transparency, with the syntax "hsla (hue, saturation, brightness, transparency)".

How to set transparency color in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1: Use the RGBA() function

rgba() function uses red (R), green (G), blue (B), and transparency (A) overlay to generate a variety of colors.

Syntax:

rgba(red, green, blue, alpha)

Attribute value:

##ValueDescription Define the red value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%. Define the green value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%. Define the blue value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%. Define transparency 0 (fully transparent) ~ 1 (fully opaque)


#red
green
blue
alpha - Transparency

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:rgb(255,0,0,0.3);}
#p2 {background-color:rgb(0,255,0,0.3);}
#p3 {background-color:rgb(0,0,255,0.3);}
#p4 {background-color:rgb(192,192,192,0.3);}
#p5 {background-color:rgb(255,255,0,0.3);}
#p6 {background-color:rgb(255,0,255,0.3);}
</style>
</head>

<body>
<p>RGB 颜色，并使用透明度:</p>
<p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p>
</body>
</html>

Rendering:

How to set transparency color in css

##Method 2: Use HSLA() function

hsla() function uses hue, saturation, brightness, and transparency to define colors.

HSLA stands for Hue, Saturation, Lightness, and Transparency (English: Hue, Saturation, Lightness, Alpha).

hsla(hue, saturation, lightness, alpha)

Attribute value:

Valuehue - Huesaturation - Saturationlightness - brightnessalpha - transparency ##Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>

<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>

Description
Define hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
Define saturation; 0% is gray, 100% full color
Define brightness 0% is dark, 50% is normal, 100% is white
Define transparency 0 (fully transparent) ~ 1 (fully opaque)

Rendering:

(Learning video sharing: How to set transparency color in css css video tutorial

)

The above is the detailed content of How to set transparency color in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Making a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

Ten-Ton WidgetsApr 15, 2025 am 09:43 AM

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

Recipes for Performance Testing Single Page Applications in WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Stop Animations During Window ResizingApr 15, 2025 am 09:40 AM

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

Weaving One Element Over and Under Another ElementApr 15, 2025 am 09:38 AM

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came

Are There Random Numbers in CSS?Apr 15, 2025 am 09:37 AM

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of

Float Element in the Middle of a ParagraphApr 15, 2025 am 09:36 AM

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at

See all articles