background |
您所在的位置：网站首页 › background-color颜色 › background |
background
|
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. The background-color property in CSS applies solid colors as background on an element. Here’s an example: html { background-color: #82a43a; }The example used above (#82a43a) is called a hex code, and it is one of several ways that CSS has to represent a single color. There are a number of ways to find the right hex codes. Anyone who has used a design tool has seen a color picker similar to this one:  Note the hex code in the lower middle.
Hex codes are one way to declare a color in CSS. There are also a whole bunch of names that you can use, for example: .page-wrap { background: white; } footer { background: black; } .almonds { background: blanchedAlmond; }These colors aren’t very flexible, but they can come in handy in a pinch. They’re easier to remember than hex codes, and there are a ton of them. Another way to declare a color is to use RGB, RGBa, HSL, or HSLa: #page-wrap { background: rgba(0, 0, 0, 0.8); /* 80% Black */ } .widget { background: hsla(170, 50%, 45%, 1); }Unlike hex codes, these values allow for transparency (alpha), which can be super useful. Learn more about RGBa or HSLa. Demo Browser support IEEdgeChromeFirefoxSafariOperaAllAllAllAllAllAll iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera MobileAllAllAll90+62+Source: caniuse More information Article on Feb 21, 2018 CSS Basics: Using Fallback Colors
Chris Coyier
Article
on
Oct 27, 2018
CSS Basics: Using Multiple Backgrounds
Chris Coyier
Article
on
Mar 4, 2016
Design Considerations: Text on Images
Chris Coyier
Article
on
Feb 20, 2020
Add Background Colors to SVGs Using the “rect” Element
Kate Holterhoff
Article
on
Dec 27, 2019
7 Uses for CSS Custom Properties
Chris Coyier
Related properties
Almanac
on
May 20, 2021
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
Sara Cope
Almanac
on
Jun 6, 2017
background-attachment
.hero { background-attachment: fixed; }
Chris Coyier
Almanac
on
May 20, 2021
background-blend-mode
.element { background-blend-mode: screen; }
Robin Rendle
Almanac
on
May 20, 2021
background-clip
.element { background-clip: padding-box; }
Chris Coyier
Almanac
on
May 20, 2021
background-color
element{ background-color: #ff7a18; }
Chris Coyier
Almanac
on
May 20, 2021
background-image
.element { background: url(texture.svg); }
Chris Coyier
Almanac
on
May 20, 2021
background-origin
.element { background-origin: border-box; }
Chris Coyier
Almanac
on
Jun 2, 2021
background-position
.element { background-position: 100px 5px; }
Chris Coyier
Almanac
on
May 20, 2021
background-repeat
.element { background-repeat: repeat-x; }
Chris Coyier
Almanac
on
May 20, 2021
background-size
.element { background-size: 300px 100px; }
Chris Coyier
|
【本文地址】
今日新闻 |
推荐新闻 |