Background ng CSS

Ang CSS ay nagbibigay ng kapangyarihan upang gamitin ang mga purong kulay bilang background, pati na rin gamitin ang background na larawan upang gumawa ng medyo kumplikadong epekto.

Ang kakayahan ng CSS sa bagay na ito ay lubos na mas mataas kaysa sa HTML.

Kulay ng background

Maaaring gamitin Katangian ng background-colorMagtakda ng kulay ng background para sa elemento. Ang katangian na ito ay tumatanggap ng anumang lehitimong halaga ng kulay.

Ang mga patakaran na ito ay nagtatakda na ang background ng elemento ay magiging kulay ng gray:

p {background-color: gray;}

Kung gusto mong gawing mas maliit ang pagpapasok ng kulay ng background mula sa teksto ng elemento, magdagdag lamang ng ilang padding:

p {background-color: gray; padding: 20px;}

亲自试一试

Maaaring itakda ang kulay ng background para sa lahat ng elemento, kasama dito ang body hanggang sa mga inline na elemento tulad ng em at a.

Ang background-color ay hindi maipabayaan, ang default ay transparent. Ang transparent ay may kahulugan na 'malampas'. Ganito, kung ang isang elemento ay walang tinukoy na kulay ng background, ang background nito ay malampas, upang ang background ng kanyang magulang na elemento ay makikita.

Background na larawan

Kailangan gamitin ang background sa pagsasakop ng larawan Attribute ng background-image.Ang default na halaga ng attribute ng background-image ay none, na nangangahulugan na walang image ang nakalagay sa background.

Kung kailangan na itakda ang isang background image, dapat na itakda ang URL halaga sa attribute na ito:

body {background-image: url(/i/eg_bg_04.gif);}

Ang karamihan ng background ay naaangkop sa elemento ng body, ngunit hindi lamang ito.

Ang halimbawa sa ibaba ay naglagay ng background sa isang paragrafo, pero hindi sa ibang bahagi ng dokumento:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Maaari ka ring maglagay ng background image sa inline element, ang halimbawa sa ibaba ay naglagay ng background image sa isang link:

a.radio {background-image: url(/i/eg_bg_07.gif);}

亲自试一试

Teorikal na, maaari ring ilagay ang image sa background ng mga pinalitan na elemento tulad ng textareas at select, ngunit hindi lahat ng user agent ay magandang paggamit nito.

Bilang karagdagan, ang background-image ay hindi ma-inherit. Sa katunayan, lahat ng mga background attribute ay hindi ma-inherit.

Background repeat

Kung kailangan na palakihin ang background image sa pahina, maaaring gamitin ang Attribute ng background-repeat.

Ang halaga ng attribute na repeat ay nagiging dahilan para ang image ay maitatatakbo sa parehong direksyon ng horizontal at vertical, tulad ng karaniwang ginagawa ng background image. Ang repeat-x at repeat-y ay nagiging dahilan para ang image ay maitatatakbo lamang sa horizontal o vertical na direksyon, habang ang no-repeat ay hindi pinapayagan ang image na maitatatakbo sa anumang direksyon.

Pangkaraniwan, ang background image ay magsisimula mula sa taas at kanang sulok ng isang elemento. Tingnan ang halimbawa sa ibaba:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

亲自试一试

Background location

Maaaring gamitin ang Attribute ng background-positionBaguhin ang posisyon ng image sa background.

Ang halimbawa sa ibaba ay naglalagay ng background image sa gitna ng elementong body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Mayroon ng maraming paraan upang magbigay ng halaga sa attribute ng background-position. Una, maaaring gamitin ang ilang keyword: top, bottom, left, right at center. Karaniwang, ang mga keyword na ito ay lumalagay sa pares, ngunit hindi palaging ganito. Maaari rin gamitin ang halaga ng sukat, tulad ng 100px o 5cm, at maaari rin gamitin ang halaga ng porsiyento. Ang iba't ibang uri ng halaga ay may kaibahan sa paglalagay ng background image.

Keyword

Ang keyword sa paglalagay ng imahe ay pinaka madaling maunawaan, na ang ginagamit nito ay katumbas ng pangalan nito. Halimbawa, top right ay naglagay ng imahe sa kanang-itaas na sulok ng area ng padding ng elemento.

Ayon sa patakaran, ang mga keyword na posisyon ay maaaring lumitaw sa anumang pagkakasunod-sunod, basta maaaring magkaroon ng hindi hihigit sa dalawang keyword - isa ay para sa horizontal na direksyon at isa ay para sa vertical na direksyon.

Kung mayroon lamang isang keyword, ipinapalagay na ang iba ay center.

Kaya't kung gusto mong ilagay ang isang imahe sa gitna ng itaas ng bawat paragrapo, maaari mong gawin ito sa pamamagitan ng pagdeklara ng:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Nandito ang mga katumbas na posisyon na keyword:

Isang sagot na keyword Katumbas na mga keyword
center center center
top top center o center top
bottom bottom center o center bottom
right right center o center right
left left center o center left

Halaga ng porsiyento

Ang pagpapakita ng halaga ng porsiyento ay mas kumplikado. Kung gusto mong ilagay ang imahe sa gitna ng elemento gamit ang halaga ng porsiyento, ito ay madaling gawin:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Ito ay magiging dahilan para sa tama na ilagay ang imahe, na ang sentro nito ay nakakasunod sa sentro ng elemento.Ibig sabihin, ang halaga ng porsiyento ay ginagamit sa parehong elemento at imahe.Ito nangangahulugan na ang punto na inilarawan sa imahe bilang 50% 50% (sentro) ay nakakasunod sa punto na inilarawan sa elemento bilang 50% 50% (sentro).

Kung ang imahe ay nasa 0% 0%, ang kanyang itaas na-kanang sulok ay ilalagay sa itaas na-kanang sulok ng area ng padding ng elemento. Kung ang posisyon ng imahe ay 100% 100%, ito ay ilalagay ang kanang-itaas na sulok ng imahe sa kanang-itaas na sulok ng padding.

Kaya't kung gusto mong ilagay ang isang imahe sa 2/3 ng horizontal na direksyon at 1/3 ng vertical na direksyon, maaari mong gawin ito sa pamamagitan ng pagdeklara ng:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Kung ibigay lamang ang isang halaga ng porsiyento, ang ibinigay na halaga ay gagamitin bilang horizontal na halaga, at ang vertical na halaga ay ipinapalagay na 50%. Ito ay katulad ng mga keyword.

Ang default na halaga ng background-position ay 0% 0%, na katumbas ng top left sa kalakip ng paggamit. Ito ang nagpapaliwanag kung bakit ang background image ay magsisimula sa kanang itaas ng area ng padding ng elemento, maliban kung iyong nagset ng iba pang halaga ng posisyon.

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

亲自试一试

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS 背景实例

设置背景颜色
本例演示如何为元素设置背景颜色。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
将图像设置为背景
本例演示如何将图像设置为背景。
将图像设置为背景 2
本例演示如何为多个元素同时设置背景图像。
如何重复背景图像
本例演示如何重复背景图像。
如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。
如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。
如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。
如何放置背景图像
本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
所有背景属性在一个声明之中
Ang halimbawa na ito ay nagpapakita kung paano gamitin ang maliit na atribute upang ilagay ang lahat ng atribute ng background sa isang pahayag.

Atribute ng Background ng CSS

Atribute Paglalarawan
background Maliit na atribute, ang ginagamit upang ilagay ang lahat ng atribute ng background sa isang pahayag.
background-attachment Magtutukoy kung ang larawan ng background ay nakapigil o sumasaklaw kasama ang ibang bahagi ng pahina.
background-color Magtutukoy kung anong kulay ng background ng elemento.
background-image Gumawa ng larawan bilang background.
background-position Magtutukoy kung saan nagsisimula ang larawan ng background.
background-repeat Magtutukoy kung magiging gumawa o hindi ng pagpapatuloy ng pagpalit ng larawan at kung paano ito gagawin.