CSS ການຫຼັງຖານຫຼາຍອັນ

ໃນວັນນີ້ທ່ານຈະຮຽນວິທີທີ່ຈະເພີ່ມພາບການຫຼັງຖານຫຼາຍອັນໃຫ້ສະຖານທີ່ໜຶ່ງ.

ທ່ານຍັງຈະຮຽນບັນດາລະບຸຄວາມທີ່ຫຍຸ້ງຕໍ່ໄປ:

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

CSS ການຫຼັງຖານຫຼາຍອັນ

CSS ອະນຸຍາດໃຫ້ທ່ານຈະ background-image ລະບຸຄວາມທີ່ຫຍຸ້ງໃຫ້ສະຖານທີ່ໜຶ່ງມີພາບການຫຼັງຖານຫຼາຍອັນ.

ພາບການຫຼັງຖານທີ່ຫຍຸ້ງຈະຖືກສະຈາກດ້ວຍຄວາມທີ່ຫຍຸ້ງ, ແລະຈະປະກອບຕົວກັນ, ແລະບັນດາພາບການຫຼັງຖານທຳອິດຈະຢູ່ໃກ້ກັບຜູ້ເບິ່ງຫຼັງຈາກມັນ.

ບັນດາຄວາມທີ່ຫຍຸ້ງນີ້ມີພາບການຫຼັງຖານສອງອັນ: ອັນທຳອິດແມ່ນພາບດອກ (ຕິດຕັ້ງກັບດ້ານດ້ານລຸ່ມແລະດ້ານຫຼັງ), ອັນທຳອິດອີກແມ່ນພາບການຫຼັງຖານເຈົ້າ (ຕິດຕັ້ງກັບດ້ານທີ່ສາມາດເບິ່ງໄດ້ແລະທີ່ສາມາດເບິ່ງໄດ້);

ຄວາມຄົນ

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

Try It Yourself

ພາບການຫຼັງຖານບັນດາບັນດາບາງ (ອີງຕາມທີ່ກ່າວໄວ້) ຫຼື background ລະບຸຄວາມທີ່ຫຍຸ້ງມາດຕະການ.

ບັນດາຄວາມທີ່ຫຍຸ້ງນີ້ໃຊ້ background ລະບຸຄວາມທີ່ຫຍຸ້ງ (ຜົນຄືກັບບັນຊີກ່າວໄວ້);

ຄວາມຄົນ

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

Try It Yourself

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

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.

这是代码：

ຄວາມຄົນ

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

Try It Yourself

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

ບົດສະຫຼຸບດັ່ງຕໍ່ມາສະແດງ contain 和 cover 的用法：

ຄວາມຄົນ

#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

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

ຄວາມຈະແຈ້ງວ່າ: ພາບການຫຼັງສາຍສາມຮູບ, ທຸກຮູບມີຄວາມຄືບໜ້າ background-size ທີ່ຫຼາຍກວ່າ:

ຄວາມຄົນ

#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 Define the drawing area of the background.
background-image Specify one or more background images for an element.
background-origin Define the placement of the background image.
background-size Define the size of the background image.