Background-color - CSS: Cascading Style Sheets - MDN Web Docs
Có thể bạn quan tâm
- References
- CSS
- background-color
- English (US)
- Remember language
- Deutsch
- Español
- Français
- 日本語
- 한국어
- Português (do Brasil)
- Русский
- 中文 (简体)
- 正體中文 (繁體)
- Try it
- Syntax
- Accessibility
- Formal definition
- Formal syntax
- Examples
- Specifications
- Browser compatibility
- See also
- CSS
- Beginner's tutorials
- Your first website: Styling the content
- CSS styling basics
- What is CSS?
- Getting started with CSS
- Challenge: Styling a biography page
- Basic CSS selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The box model
- Handling conflicts
- CSS values and units
- Sizing items in CSS
- Backgrounds and borders
- Overflowing content
- Images, media, and form elements
- Styling tables
- Debugging CSS
- Challenge: Fundamental CSS comprehension
- Challenge: Creating fancy letterheaded paper
- Challenge: A cool-looking box
- CSS text styling
- Fundamental text and font styling
- Styling lists
- Styling links
- Web fonts
- Challenge: Typesetting a community school homepage
- CSS layout
- Introduction to CSS layout
- Floats
- Positioning
- Flexbox
- CSS grid layout
- Responsive design
- Media query fundamentals
- Challenge: Fundamental layout comprehension
- CSS reference
- Modules
- CSS anchor positioning
- CSS animations
- CSS backgrounds and borders
- CSS basic user interface
- CSS box alignment
- CSS box model
- CSS box sizing
- CSS cascade and inheritance
- CSS color adjustment
- CSS colors
- CSS compositing and blending
- CSS conditional rules
- CSS containment
- CSS counter styles
- CSS custom properties for cascading variables
- CSS display
- CSS filter effects
- CSS flexible box layout
- CSS font loading
- CSS fonts
- CSS fragmentation
- CSS generated content
- CSS grid layout
- CSS images
- CSS inline layout
- CSS lists and counters
- CSS logical properties and values
- CSS masking
- CSS media queries
- CSS motion path
- CSS multi-column layout
- CSS namespaces
- CSS nesting
- CSS overflow
- CSS overscroll behavior
- CSS paged media
- CSS positioned layout
- CSS properties and values API
- CSS pseudo-elements
- CSS ruby layout
- CSS scoping
- CSS scroll snap
- CSS scroll-driven animations
- CSS scrollbars styling
- CSS selectors
- CSS shadow parts
- CSS shapes
- CSS syntax
- CSS table
- CSS text
- CSS text decoration
- CSS transforms
- CSS transitions
- CSS view transitions
- CSS writing modes
- CSSOM view
- Properties
- -moz-*
- -moz-float-edge Non-standard Deprecated
- -moz-force-broken-image-icon Non-standard Deprecated
- -moz-image-region Non-standard
- -moz-orient Non-standard
- -moz-user-focus Non-standard Deprecated
- -moz-user-input Non-standard Deprecated
- -webkit-*
- -webkit-border-before Non-standard
- -webkit-box-reflect Non-standard
- -webkit-line-clamp
- -webkit-mask-box-image Non-standard
- -webkit-mask-composite Non-standard
- -webkit-mask-position-x Non-standard
- -webkit-mask-position-y Non-standard
- -webkit-mask-repeat-x Non-standard
- -webkit-mask-repeat-y Non-standard
- -webkit-tap-highlight-color Non-standard
- -webkit-text-fill-color
- -webkit-text-security Non-standard
- -webkit-text-stroke
- -webkit-text-stroke-color
- -webkit-text-stroke-width
- -webkit-touch-callout Non-standard
- accent-color
- align-*
- align-content
- align-items
- align-self
- all
- anchor-name Experimental
- animation-*
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range Experimental
- animation-range-end Experimental
- animation-range-start Experimental
- animation-timeline Experimental
- animation-timing-function
- appearance
- aspect-ratio
- backdrop-filter
- backface-visibility
- background-*
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border-*
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-*
- box-align Non-standard Deprecated
- box-decoration-break
- box-direction Non-standard Deprecated
- box-flex Non-standard Deprecated
- box-flex-group Non-standard Deprecated
- box-lines Non-standard Deprecated
- box-ordinal-group Non-standard Deprecated
- box-orient Non-standard Deprecated
- box-pack Non-standard Deprecated
- box-shadow
- box-sizing
- break-*
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-*
- clip Deprecated
- clip-path
- clip-rule
- color-*
- color
- color-interpolation
- color-interpolation-filters
- color-scheme
- column-*
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain-*
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container-*
- container
- container-name
- container-type
- content
- content-visibility
- counter-*
- counter-increment
- counter-reset
- counter-set
- cursor
- cx
- cy
- d
- direction
- display
- dominant-baseline
- empty-cells
- field-sizing Experimental
- fill-*
- fill
- fill-opacity
- fill-rule
- filter
- flex-*
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- flood-color
- flood-opacity
- font-*
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-palette
- font-size
- font-size-adjust
- font-smooth Non-standard
- font-stretch
- font-style
- font-synthesis
- font-synthesis-position Experimental
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- forced-color-adjust
- gap
- grid-*
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-*
- image-orientation
- image-rendering
- image-resolution Experimental
- initial-letter
- inline-size
- inset-*
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- interpolate-size Experimental
- isolation
- justify-*
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-*
- line-break
- line-height
- line-height-step Experimental
- list-*
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin-*
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- margin-trim Experimental
- marker-*
- marker
- marker-end
- marker-mid
- marker-start
- mask-*
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- math-*
- math-depth
- math-shift Experimental
- math-style
- max-*
- max-block-size
- max-height
- max-inline-size
- max-width
- min-*
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- object-fit
- object-position
- offset-*
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- opacity
- order
- orphans
- outline-*
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow-*
- overflow
- overflow-anchor
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- overlay Experimental
- overscroll-*
- overscroll-behavior
- overscroll-behavior-block
- overscroll-behavior-inline
- overscroll-behavior-x
- overscroll-behavior-y
- padding-*
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-*
- page
- page-break-after
- page-break-before
- page-break-inside
- paint-order
- perspective
- perspective-origin
- place-*
- place-content
- place-items
- place-self
- pointer-events
- position-*
- position
- position-anchor Experimental
- position-area Experimental
- position-try Experimental
- position-try-fallbacks Experimental
- position-try-order Experimental
- position-visibility Experimental
- print-color-adjust
- quotes
- r
- resize
- right
- rotate
- row-gap
- ruby-align
- ruby-position
- rx
- ry
- scale
- scroll-*
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scroll-timeline Experimental
- scroll-timeline-axis Experimental
- scroll-timeline-name Experimental
- scrollbar-*
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- shape-*
- shape-image-threshold
- shape-margin
- shape-outside
- shape-rendering
- stop-color
- stop-opacity
- stroke-*
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- tab-size
- table-layout
- text-*
- text-align
- text-align-last
- text-anchor
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip Experimental
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-rendering
- text-shadow
- text-size-adjust Experimental
- text-spacing-trim Experimental
- text-transform
- text-underline-offset
- text-underline-position
- text-wrap
- text-wrap-mode
- text-wrap-style
- timeline-scope Experimental
- top
- touch-action
- transform-*
- transform
- transform-box
- transform-origin
- transform-style
- transition-*
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- user-modify Non-standard Deprecated
- user-select
- vector-effect
- vertical-align
- view-*
- view-timeline Experimental
- view-timeline-axis Experimental
- view-timeline-inset Experimental
- view-timeline-name Experimental
- view-transition-name
- visibility
- white-space
- white-space-collapse
- widows
- width
- will-change
- word-break
- word-spacing
- writing-mode
- x
- y
- z-index
- zoom
- -moz-*
- Selectors
- & nesting selector
- Attribute selectors
- Class selectors
- ID selectors
- Type selectors
- Universal selectors
- Combinators
- Child combinator
- Column combinator Experimental
- Descendant combinator
- Namespace separator
- Next-sibling combinator
- Selector list
- Subsequent-sibling combinator
- Pseudo-classes
- :-moz-broken Non-standard Deprecated
- :-moz-drag-over Non-standard
- :-moz-first-node Experimental Non-standard
- :-moz-handler-blocked Non-standard
- :-moz-handler-crashed Non-standard
- :-moz-handler-disabled Non-standard
- :-moz-last-node Experimental Non-standard
- :-moz-loading Non-standard
- :-moz-locale-dir(ltr) Non-standard
- :-moz-locale-dir(rtl) Non-standard
- :-moz-only-whitespace Non-standard
- :-moz-submit-invalid Non-standard
- :-moz-suppressed Non-standard
- :-moz-user-disabled Non-standard
- :-moz-window-inactive Non-standard
- :active
- :any-link
- :autofill
- :blank Experimental
- :buffering
- :checked
- :current Experimental
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has-slotted Experimental
- :has()
- :host
- :host-context()
- :host()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link Experimental
- :modal
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :paused
- :picture-in-picture
- :placeholder-shown
- :playing
- :popover-open
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :seeking
- :stalled
- :state()
- :target
- :target-within Experimental
- :user-invalid
- :user-valid
- :valid
- :visited
- :volume-locked
- :where()
- Pseudo-elements
- ::-moz-color-swatch Non-standard
- ::-moz-focus-inner Experimental Non-standard
- ::-moz-list-bullet Experimental Non-standard
- ::-moz-list-number Experimental Non-standard
- ::-moz-meter-bar Non-standard
- ::-moz-progress-bar Experimental Non-standard
- ::-moz-range-progress Non-standard
- ::-moz-range-thumb Non-standard
- ::-moz-range-track Non-standard
- ::-webkit-inner-spin-button Non-standard
- ::-webkit-meter-bar Non-standard Deprecated
- ::-webkit-meter-even-less-good-value Non-standard
- ::-webkit-meter-inner-element Non-standard
- ::-webkit-meter-optimum-value Non-standard
- ::-webkit-meter-suboptimum-value Non-standard
- ::-webkit-progress-bar Non-standard
- ::-webkit-progress-inner-element Non-standard
- ::-webkit-progress-value Non-standard
- ::-webkit-scrollbar Non-standard
- ::-webkit-search-cancel-button Non-standard
- ::-webkit-search-results-button Non-standard
- ::-webkit-slider-runnable-track Experimental Non-standard
- ::-webkit-slider-thumb Experimental Non-standard
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::grammar-error
- ::highlight()
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- ::spelling-error
- ::target-text
- ::view-transition
- ::view-transition-group
- ::view-transition-image-pair
- ::view-transition-new
- ::view-transition-old
- At-rules
- @charset
- @color-profile
- @container
- @counter-style
- @document Non-standard Deprecated
- @font-face
- @font-feature-values
- @font-palette-values
- @import
- @keyframes
- @layer
- @media
- @namespace
- @page
- @position-try Experimental
- @property
- @scope
- @starting-style
- @supports
- @view-transition
- Functions
- -moz-image-rect Non-standard Deprecated
- abs()
- acos()
- anchor-size() Experimental
- anchor() Experimental
- asin()
- atan()
- atan2()
- attr()
- calc-size() Experimental
- calc()
- clamp()
- cos()
- counter()
- counters()
- cross-fade()
- element() Experimental
- env()
- exp()
- fit-content()
- hypot()
- log()
- max()
- min()
- minmax()
- mod()
- pow()
- ray()
- rem()
- repeat()
- round()
- sign()
- sin()
- sqrt()
- symbols()
- tan()
- url()
- var()
- Types
- <absolute-size>
- <alpha-value>
- <angle-percentage>
- <angle>
- <basic-shape>
- <blend-mode>
- <box-edge>
- <calc-keyword>
- <calc-sum>
- <color-interpolation-method>
- <color>
- <custom-ident>
- <dashed-ident>
- <dimension>
- <display-box>
- <display-inside>
- <display-internal>
- <display-legacy>
- <display-listitem>
- <display-outside>
- <easing-function>
- <filter-function>
- <flex>
- <frequency-percentage>
- <frequency>
- <generic-family>
- <gradient>
- <hex-color>
- <hue-interpolation-method>
- <hue>
- <ident>
- <image>
- <integer>
- <length-percentage>
- <length>
- <line-style>
- <named-color>
- <number>
- <overflow>
- <percentage>
- <position-area> Experimental
- <position>
- <ratio>
- <relative-size>
- <resolution>
- <shape> Deprecated
- <string>
- <system-color>
- <time-percentage>
- <time>
- <transform-function>
- <url>
- Guides
- Animations
- Using CSS animations
- Backgrounds and Borders
- Using multiple backgrounds
- Resizing background images
- Box alignment
- Box alignment in block layout
- Box alignment in flexbox
- Box alignment in grid layout
- Box alignment in multi-column layout
- Box model
- Introduction to the CSS basic box model
- Mastering margin collapsing
- Colors
- Applying_color_to_HTML_elements
- Color values
- Using relative colors
- Using color wisely
- Accessibility_Understanding_colors_and_luminance"
- Accessibility: Color contrast
- Columns
- Basic concepts of multi-column layout
- Styling columns
- Spanning and balancing columns
- Handling overflow in multi-column layout
- Handling content breaks in multi-column layout
- Conditional rules
- Using feature queries
- Containment
- Using CSS containment
- CSS container queries
- Using container size and style queries
- CSSOM view
- Coordinate systems
- Flexbox
- Basic concepts of flexbox
- Relationship of flexbox to other layout methods
- Aligning items in a flex container
- Ordering flex items
- Controlling ratios of flex items along the main axis
- Mastering wrapping of flex items
- Typical use cases of flexbox
- Flow layout
- Block and inline layout in normal flow
- In flow and out of flow
- Introduction to formatting contexts
- Flow layout and writing modes
- Flow layout and overflow
- Fonts
- OpenType font features guide
- Variable fonts guide
- Grid
- Basic concepts of grid layout
- Relationship of grid layout to other layout methods
- Grid layout using line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in grid layout
- Box alignment in grid layout
- Grids, logical values, and writing modes
- Grid layout and accessibility
- CSS grid layout and progressive enhancement
- Realizing common layouts using grids
- Subgrid
- Masonry layout Experimental
- Images
- Using CSS gradients
- Lists and counters
- Using CSS counters
- Consistent list indentation
- Logical properties
- Basic concepts of logical properties and values
- Logical properties for floating and positioning
- Logical properties for margins, borders, and padding
- Logical properties for sizing
- Math functions
- Using CSS math functions
- Media queries
- Using media queries
- Using media queries for accessibility
- Testing media queries programmatically
- Printing
- Nesting style rules
- Using CSS nesting
- CSS nesting at-rules
- CSS nesting and specificity
- Positioning
- Understanding z-index
- Scroll snap
- Basic concepts of scroll snap
- Shapes
- Overview of shapes
- Shapes from box values
- Basic shapes with shape-outside
- Shapes from images
- Text
- Wrapping and breaking text
- Transforms
- Using CSS transforms
- Transitions
- Using CSS transitions
- CSS Layout cookbook
- Recipe: Media objects
- Column layouts
- Center an element
- Sticky footers
- Split navigation
- Breadcrumb navigation
- List group with badges
- Pagination
- Card
- Grid wrapper
- Tools
- Color picker tool
- Box-shadow generator
- Border-image generator
- Border-radius generator
- Try it
- Syntax
- Accessibility
- Formal definition
- Formal syntax
- Examples
- Specifications
- Browser compatibility
- See also
The background-color CSS property sets the background color of an element.
Try it
Syntax
css/* 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 / 50%); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 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 <color> value.
Values
<color>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
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.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Formal definition
Initial value | transparent |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line. |
Inherited | no |
Computed value | computed color |
Animation type | a color |
Formal syntax
background-color = <color>Examples
Colorize boxes
This example demonstrates the applying background-color to HTML <div> elements using different CSS <color> values.
HTML
html<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div> <div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div> <div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>CSS
css.example-one { background-color: transparent; } .example-two { background-color: rgb(153 102 153); color: rgb(255 255 204); } .example-three { background-color: #777799; color: #ffffff; }Result
Colorize tables
This example demonstrates the use of background-color on HTML <table> elements, including <tr> rows and <td> cells.
HTML
html<table> <tr id="r1"> <td id="c11">11</td> <td id="c12">12</td> <td id="c13">13</td> </tr> <tr id="r2"> <td id="c21">21</td> <td id="c22">22</td> <td id="c23">23</td> </tr> <tr id="r3"> <td id="c31">31</td> <td id="c32">32</td> <td id="c33">33</td> </tr> </table>CSS
csstable { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px; } td { border: solid 1px black; } #r1 { background-color: lightblue; } #c12 { background-color: cyan; } #r2 { background-color: grey; } #r3 { background-color: olive; }Result
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-color |
Browser compatibility
BCD tables only load in the browser
See also
- Multiple backgrounds
- The <color> data type
- Other color-related properties: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color
Help improve MDN
Was this page helpful to you?YesNoLearn how to contribute.This page was last modified on Oct 22, 2024 by MDN contributors.
View this page on GitHub • Report a problem with this contentTừ khóa » Html Color Text Background
-
HTML Styles - W3Schools
-
Background Color - Tryit Editor V3.7
-
Change HTML Background Color Or Font Color - BitDegree
-
How To Add & Change Background Color In HTML - HubSpot Blog
-
Html - How Do I Set A Background-color For The Width Of Text, Not The ...
-
Font Colors And Backgrounds - HTML Test Suite For UAAG 1.0 (Draft)
-
In HTML, How Do I Change The Color Of The Text And Background Of A ...
-
HTML Colors, Text, Background And Border
-
HTML Text Color - HTML Color Codes
-
HTML Color Code For Background And Text On Web Page
-
#FFFFFF (White) HTML Color Code - Computer Hope
-
How To Highlight Text In Color Using HTML And CSS - Computer Hope
-
Background Color