淺談背景設置中的背景定位background-position的用法

background-position設置背景的位置,有以下兩種用法

  1. 方位名詞作爲其值background-position: 方位 方位 (left right top bottom center 等方位名詞)
  2. 具體的像素值分別作爲x,y方向的偏移量來進行定位background-position: 20px 20px ;

 

案例:對於一個尺寸爲1920px的背景圖,如何設置使其水平居中顯示,這裏顯然要用到背景定位

css代碼段:

<style>
    div {
        background:url(..) center top;
    }
</style>

效果如下:

注:HTML代碼段

<body>
    <div>背景設置
        <p>君不見高堂明鏡悲白髮,朝如青絲暮成雪。</p>

        <p> 人生得意須盡歡,莫使金樽空對月。</p>
        
    </div>


</body>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章