背景透明background transparent

最新推荐文章于 2024-09-11 21:27:12 发布

Martin_Yelvin

最新推荐文章于 2024-09-11 21:27:12 发布

阅读量6.7k

点赞数

分类专栏：前端文章标签： background

本文链接：https://blog.csdn.net/qq_36279445/article/details/79004727

版权

前端专栏收录该内容

142 篇文章 0 订阅

订阅专栏

The background-color CSS property sets the background color of an element, using either a <color> value or the keyword transparent.

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */

/* RGB value */
background-color: rgb(255, 255, 128);

/* RGBA value or RGB with alpha channel */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

Initial value	`transparent`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Media	visual
Computed value	computed color
Animation type	a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

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

Values

<color>

Is a CSS <color> that describes the uniform color of the background. Even if one or several background-image are defined, this color can be affect the rendering, by transparency if the images aren't opaque. In CSS, transparent is a color.

Formal syntax

<color>

where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where <alpha-value> = <number> | <percentage> <hue> = <number> | <angle>

Examples

HTML

<div class="exampleone">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="examplethree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Result

Open in CodePen Open in JSFiddle

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'background-color' in that specification.	Candidate Recommendation	Though technically removing the `transparent` keyword, this doesn't change anything as it has been incorporated as a true `<color>`
CSS Level 2 (Revision 1) The definition of 'background-color' in that specification.	Recommendation	No change
CSS Level 1 The definition of 'background-color' in that specification.	Recommendation	Initial definition

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	41	3.5	1
Alpha channel for hex values	52	No	No	No	No	No

1. In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.