Background ng CSS

Ang CSS background properties ay ginagamit upang tanggapin ang background effects ng elemento.

Sa mga Seksyon na ito, malalaman mo ang mga sumusunod na CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color Attribute ay nagtatakda ng kulay ng background ng elemento.

Example

Ang pagtatakda ng kulay ng background ng pahina ay gayon ang ito:

body {
  background-color: lightblue;
}

Try It Yourself

Ang kulay ay karaniwang tinatakan sa pamamagitan ng sumusunod na paraan sa CSS:

  • Tama na pangalan ng kulay - halimbawa "red"
  • Halaga ng pang-heksadecimal - halimbawa "#ff0000"
  • Halaga ng RGB - halimbawa "rgb(255,0,0)"

Panghahanapin: CSS Color Value，makikita ang kumpletong listahan ng posibleng halaga ng kulay.

Ilang pang elemento

Maaaring itakda ang kulay ng background sa anumang elemento ng HTML:

Example

Dito, ang mga elemento na <h1>, <p> at <div> ay magkakaiba ang kulay ng background:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Try It Yourself

Opakidad / Transparent

Ang opakidad na attribute ay nagtatakda ng opakidad/transparent ng elemento. Ang pagtawag ay 0.0 - 1.0. Ang mas mababang halaga, mas matitindig ang opakidad:

opakidad 1
opakidad 0.6
opakidad 0.3
opakidad 0.1

Example

div {
  background-color: green;
  opakidad: 0.3;
}

Try It Yourself

Babala:Gamitin ang opakidad Kapag ginagamit ang opakidad na attribute sa background ng elemento, lahat ng mga anak na elemento ay minana ang parehong opakidad. Ito ay maaring magiging mahirap basahin ang teksto sa loob ng elemento na ganap na walang opakidad.

Gamitin ang opakidad ng RGBA

Kung ayaw mong gamitin ang opakidad sa mga anak na elemento, halimbawa sa halimbawa sa itaas, gamitin ang: RGBA Halaga ng kulay. Ang mga halimbawa sa ibaba ay nagtatakda ng kulay ng background kaysa sa opakidad ng teksto:

100% opakidad
60% opakidad
30% opacity
10% opacity

from our Kulay ng CSS Learned in this chapter that RGB can be used as color values. In addition to RGB, RGB color values can also be used with alpha channels are used together (RGBA) - This channel specifies the opacity of the color.

RGBA color value is specified as: rgba(red, green, blue, alpha)。alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Tip:You can find more information in our Kulay ng CSS Learn more about RGBA colors in this chapter.

Example

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Try It Yourself