cari

Rumah  >  Artikel  >  hujung hadapan web  >  background-position属性怎么用

background-position属性怎么用

青灯夜游
青灯夜游asal
2019-02-18 14:08:3322614semak imbas

background-position属性是用于设置背景图像的起始位置的，该属性的使用语法是“background-position: x y;”，其中参数x表示水平位置，y表示垂直位置。

background-position属性怎么用

本文操作环境：Windows7系统、Dell G3电脑、HTML5&&CSS3版。

background-position属性是用于设置背景图像的起始位置的。下面本篇文章就来带大家认识一下background-position属性，希望对大家有所帮助。

CSS  background-position属性

作用：设置背景图像的起始位置。

说明：该background-position属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

语法：

background-position: x y；

x表示水平位置，y表示垂直位置；x和y有多种赋值方式，下面我们来看看x，y可能的值：

值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

注：需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

CSS  background-position属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{ 
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 50px; 
}
</style>
</head>

<body>

</body>
</html>

效果图：

1.jpg

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

Atas ialah kandungan terperinci background-position属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 firefox css css3 position background
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css background-color属性怎么用？Artikel seterusnya：background-repeat属性怎么用

Artikel berkaitan

Lihat lagi