How to set transparent background in html-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to set transparent background in html

青灯夜游

Mar 08, 2021 am 10:53 AM

html background Transparent color

How to set a transparent background in html: 1. Directly use "backgroud:rgba(R,G, B, A)" to set a transparent background. 2. First use the "backgroud: color value;" style to set the background color; then use the "opacity: transparency value" style to add a transparency to the background color.

How to set transparent background in html

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

htmlSet transparent background

There are two ways to set transparent background color in html: one is to set it through rgba method, The other is through background and opacity settings.

1. RGB method

The so-called RGBA color is the three primary colors of RGB plus ALPHA. Provides transparency properties while adding color to the background.

Usage:

background:rgba(R,G, B, A);

Copy after login

Red (R): represents the red component of the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used) .
Green (G): represents the green component in the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used).
Blue (B): represents the blue component of the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used).
Transparency (A): represents transparency, ranging from 0 (completely transparent) to 1 (completely opaque).

Let’s take a look at a specific example of setting the background color transparency through rgba:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
			}
			.div1{
				background: rgba(220, 38, 38, 1);
			}
			.div2 {
				
				background: rgba(220, 38, 38, 0.2);
			}
		</style>
	</head>

	<body>
		<div class="div1">背景颜色，没有设置透明度</div><br />
		<div class="div2">背景颜色，设置了透明度</div>

	</body>

</html>

Copy after login

Rendering:

How to set transparent background in html

1. Set the background color to be transparent through background and opacity

The attribute value in the background attribute is relatively simple, so I won’t go into details here. Let’s take a brief look here. Opacity attribute

The "opacity" of the opacity attribute parameter is represented by a number, ranging from 0.0 to 1.0. Fully transparent is 0.0, and fully opaque is 1.0. In other words, the larger the number, the more opaque the element is.

In addition to the "opacity" parameter, there is also inherit to inherit the parent layer properties. However, browser support is poor and it is not recommended to use it.

After reading the introduction of the two attributes, let's look at the specific example of setting the background color transparency through backgroud and opacity

The code is as follows:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
			
			.div1 {
				background: red;
			}
			
			.div2 {
				
				background: red;
				opacity: 0.2;
			}
		</style>
	</head>

	<body>
		<div class="div1">背景颜色，没有设置透明度</div><br />
		<div class="div2">背景颜色，设置了透明度</div>

	</body>

</html>

Copy after login

Rendering:

How to set transparent background in html

Recommended tutorial: CSS video tutorial

Recommended online manual: css online manual

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

Statement of this Website

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