CSS Maraming Background

Sa kabanata na ito, matututunan mo kung paano idagdag ang ilang imaheng panglikuran sa isang elemento.

Makikita mo rin ang mga sumusunod na atributo:

  • background-size
  • background-origin
  • background-clip

CSS Maraming Background

CSS ay nagbibigay-daan sa iyo na gamitin ang: background-image Ang atributo ay nagdagdag ng maraming imaheng panglikuran sa isang elemento.

Ang iba't ibang imaheng panglikuran ay nakagahati sa pamamagitan ng komo, at ang mga imaheng panglikuran ay magbabahagi, kung saan ang unang imaheng panglikuran ay pinakamalapit sa tagamasid.

Ang mga halimbawa na ito ay may dalawang imaheng panglikuran, ang unang imaheng panglikuran ay ang bulaklak (ay nakakabit sa kanang ibaba at itaas), ang ikalawang imaheng panglikuran ay ang background ng papel (ay nakakabit sa kanang itaas at kabilang):

实例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Try It Yourself

Maraming imaheng panglikuran ay maaaring gamitin ang magkahiwalay na atributo ng likuran (tulad ng nabanggit) o background Maliit na atributo upang tukuyin.

Ang mga halimbawa na ito ay gumagamit ng: background Maliit na atributo (ang resulta ay katulad sa nakaraang halimbawa):

实例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Try It Yourself

CSS Background Size

CSS background-size Ang attribute ay nagbibigay-daan sa iyo na masukat ang laki ng background na imahe.

Maaaring masukat ang laki ng background na imahe sa pamamagitan ng haba, porsyento o gumagamit ng isang sa mga sumusunod na keyword:contain o cover.

Ang halimbawa na ito ay nagbabawas ng laki ng background na imahe ng mas maliit kaysa sa orihinal na imahe (gumagamit ng pixel):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ito ang code:

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Try It Yourself

background-size Ang dalawang posibleng halaga nito ay contain at cover.

contain Ang keyword ay isasadya ang laki ng background na imahe sa pinakamalaking laki (pero ang lapad at taas nito ay dapat magiging magkakasangayon sa lugar ng nilalaman). Sa gayon, depende sa proporsyon ng background na imahe at lugar ng lokasyon ng background, maaaring mayroong ilang bahagi ng background na hindi napapalibutan ng background na imahe.

cover Ang mga keyword ay isasadya ang laki ng background na imahe, upang ang lugar ng nilalaman ay lubusang napapalibutan ng background na imahe (ang lapad at taas nito ay kasing lubos sa lugar ng nilalaman). Sa gayon, ang ilang bahagi ng background na imahe ay maaaring hindi makikita sa lugar ng lokasyon ng background.

下面的例子展示了 contain at cover Ang paggamit nito:

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Try It Yourself

Idefinir ang laki ng maraming background na imahe

Sa pagtutuloy sa maraming background,background-size Ang attribute ay maaaring tanggapin ang ilang mga halaga ng pagsesize ng background (gumagamit ng listahan ng kundisyon ng kumomokomoko).

Ang halimbawa na ito ay tinukoy ng tatlong pambackground na imahe, bawat isa ay may magkakaibang background-size na halaga:

实例

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Try It Yourself

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

  • 用图像填充整个页面（无空白）
  • 根据需要缩放图像
  • 在页面上居中图像
  • 不引发滚动条

下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

实例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Try It Yourself

Hero Image

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

实例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Try It Yourself

CSS background-origin Attribute

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

  • border-box - 背景图片从边框的左上角开始
  • padding-box - 背景图像从内边距边缘的左上角开始（默认）
  • content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

实例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Try It Yourself

CSS background-clip Attribute

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

  • border-box - 背景绘制到边框的外部边缘（默认）
  • padding-box - 背景绘制到内边距的外边缘
  • content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

实例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Try It Yourself

Advanced CSS Background Properties

Property Description
background A shorthand attribute used to set all background properties in one declaration.
background-clip Specify the drawing area of the background.
background-image Specify one or more background images for an element.
background-origin Specify the placement position of the background image.
background-size Specify the size of the background image.