background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.

background-color ã¯ CSS ã®ããããã£ã§ãè¦ç´ ã®èæ¯è²ãè¨å®ãã¾ãã

è©¦ãã¦ã¿ã¾ããã

background-color: brown;

background-color: #74992e;

background-color: rgb(255 255 128);

background-color: rgb(255 255 128 / 0.5);

background-color: hsl(50 33% 25%);

background-color: hsl(50 33% 25% / 0.75);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

æ§æ

css

/* ãã¼ã¯ã¼ãå¤ */
background-color: red;
background-color: indigo;

/* 16 é²ã®å¤ */
background-color: #bbff00; /* å®å¨ä¸éé */
background-color: #bf0; /* å®å¨ä¸ééã®çç¸®å½¢ */
background-color: #11ffee00; /* å®å¨éé */
background-color: #1fe0; /* å®å¨ééã®çç¸®å½¢ */
background-color: #11ffeeff; /* å®å¨ä¸éé */
background-color: #1fef; /* å®å¨ä¸ééã®çç¸®å½¢ */

/* RGB å¤ */
background-color: rgb(255 255 128); /* ä¸éé */
background-color: rgba(117 190 218 / 50%); /* 50% ä¸éé */

/* HSL å¤ */
background-color: hsl(50 33% 25%); /* ä¸éé */
background-color: hsl(50 33% 25% / 75%); /* 75% ä¸ééãããªãã¡ 25% éé */

/* ç¹æ®ãªãã¼ã¯ã¼ãå¤ */
background-color: currentColor;
background-color: transparent;

/* ã°ãã¼ãã«å¤ */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;

background-color ããããã£ã¯åä¸ã® <color> å¤ã§æå®ãã¾ãã

å¤

<color>: èæ¯ã®åä¸è² (uniform color) ãè¡¨ãã¾ããæå®ããã¦ããã° background-image ã®èå¾ã«æç»ããã¾ãããç»åã«éæãªé¨åãããã°è²ãè¦ãã¾ãã

ã¢ã¯ã»ã·ããªãã£

å¬å¼å®ç¾©

åæå¤	`transparent`
é©ç¨å¯¾è±¡	ãã¹ã¦ã®è¦ç´ ã `::first-letter`ããã³`::first-line` ã«ãé©ç¨ããã¾ãã
ç¶æ¿	ãªã
è¨ç®å¤	è²ã®è¨ç®å¤
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	è²

å½¢å¼ææ³

background-color = 
  <color>

ä¾

ããã¯ã¹ã¸ã®è²ä»ã

ãã®ä¾ã§ã¯ããã¾ãã¾ãª CSS ã® <color> å¤ãä½¿ç¨ãã¦ã HTML ã® <div> è¦ç´ ã« background-color ãé©ç¨ããæ¹æ³ãç¤ºãã¦ãã¾ãã

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: white;
}

çµæ

è¡¨ã¸ã®è²ä»ã

ãã®ä¾ã§ã¯ã background-color ã HTML ã® <table> è¦ç´ ï¼<tr> ã®è¡ã <td> ã®ã»ã«ãå«ãï¼ã«ä½¿ç¨ããæ¹æ³ãç¤ºãã¦ãã¾ãã

HTML

html

<table>
  <tbody>
    <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>
  </tbody>
</table>

CSS

css

table {
  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;
}