如何使用background-position屬性-創(chuàng)新互聯(lián)

本篇文章為大家展示了如何使用background-position屬性，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

目前成都創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網站建設、域名、網絡空間、網站托管維護、企業(yè)網站設計、西藏網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 50px; 
}
</style>
</head>

<body>

</body>
</html>

效果圖：

如何使用background-position屬性

上述內容就是如何使用background-position屬性，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)網站制作公司行業(yè)資訊頻道。

當前文章：如何使用background-position屬性-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article22/ddsgcc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網站維護、響應式網站、虛擬主機、網站排名、標簽優(yōu)化

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網站建設