ຄູ່ມວັນ

ປື້ມການອະທິບາຍ CSS

CSS 属性

ຫຼັກສູດຄັນຄົນ

ການແນະນຳ:

CodeW3C.com 百宝箱

ການກຳນົດຄູ່ຄົນ background-position-x CSS

ການແກ້ງຕາຕະລາງ background-position
下一页 background-position-y

ການສະແດງແລະການນໍາໃຊ້

background-position-x ລະບົບຕັ້ງຕັດພາບບໍລິການໃນດ້ານ x.

ຄຳແນະນຳ:ຂໍ້ສັນຍາບໍລິການພາບບໍລິການຈະຕັ້ງຢູ່ທີ່ປະຕູສະຖານທີ່ຂອງບັນດາບັນຊີແລະປ່ຽນແປງຄວາມພາບຫຼັງໃນທິດທາງຕາຍລຳດັບລຳດັບ:

ຄວາມຈິງ

ຕົວຢ່າງ 1

ນຳໃຊ້ທີ່ຈະຕັ້ງພາບບໍລິການໃນດ້ານ x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Try it yourself

ຕົວຢ່າງ 2

ນຳໃຊ້ທີ່ຈະຕັ້ງພາບບໍລິການໃນດ້ານຂວາ:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Try it yourself

ຕົວຢ່າງ 3

ນຳໃຊ້ຄວາມຕາຍຕະລາງຕາມສາມສູນໃນພາບບໍລິການ:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Try it yourself

ຕົວຢ່າງ 4

ນຳໃຊ້ຄວາມຕາຍຕະລາງຕາມຖຸດສັດໃນພາບບໍລິການ:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Try it yourself

ຕົວຢ່າງ 5

ນຳໃຊ້ປະສົມປະກອບພາບບໍລິການຫຼັງການປ່ຽນແປງຄວາມພາບຫຼັງຂອງສະຖານທີ່ຂອງບັນດາບັນຊີ:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* If the image is not available, use this color */
  height: 300px; /* Must set height */
  background-position-x: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Adjust the size of the background image to cover the entire container */
}

Try it yourself

CSS Syntax

background-position-x: value;

Attribute value

Value	Description
left	Position the background at the left of the x-axis.
right	Position the background at the right of the x-axis.
center	Position the background at the center of the x-axis.
x%	The left of the x-axis is 0%, and the right is 100%. Percentage values refer to the width of the background positioning area minus the width of the background image.
xpos	The horizontal distance from the left. The unit can be pixels (such as 0px) or others ການກຳນົດສະຕິບັນ CSS。
xpos offset	double-value syntax, supported only in Firefox and Safari. xpos Set to left or right offset It is the horizontal distance from the left or right of the background image set by xpos The unit can be pixels or others ການກຳນົດສະຕິບັນ CSS。
initial	Set this property to its default value. See initial。
inherit	Inherit this property from its parent element. See inherit。

Technical details

Default value：	0%
Inheritance：	No
Animation production：	Supported. See:Animation-related properties。
Version：	CSS3
JavaScript Syntax：	object.style.backgroundPositionX="center"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

	Chrome	Edge	Firefox	Safari	Opera
single-value syntax	1.0	12.0	49.0	1.0	15.0
double-value syntax	ບໍ່ສາມາດສະໜັບສະໜູນ	ບໍ່ສາມາດສະໜັບສະໜູນ	49.0	15.4	ບໍ່ສາມາດສະໜັບສະໜູນ