[點晴永久免費OA]background-image、background-position背景圖片位置和background-repeat屬性怎么用
當前位置：點晴教程→點晴OA辦公管理信息系統
→『 經驗分享&問題答疑 』
用法：
<div style="background-image: url(/mis/images/axis_line_horizontal.png); background-position: 0px 7px; background-repeat: repeat-x;"></div>
background-position 用來定義背景圖片位置，是 CSS background 的屬性之一，常與 background-image、background-repeat 搭配設計，讓網頁背景圖片靠上、下、左、右甚至是置中顯示，設計時需使用水平與垂直方向的位置，可以給數字、百分比或方向參數，讓圖片能夠在正確的位置呈現，background-position 是標準的 CSS 背景位置設計方法，所有的主流瀏覽器都支持 background-position。 background-position 基本語法 background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ; 通常使用水平方向以及垂直方向的組合來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊，除此之外，還可以使用「靠左與靠上的距離」以及「靠左與靠上的百分比」來設計，示例還會詳細說明。 可以使用的方向參數
示例一、各種對齊方式 background-position:right bottom; // 靠右靠下對齊 background-position:30px 60px; //靠左 30px 靠上 60 px 的位置 background-position:10% 50%; // 靠左 10% 靠上 50% 的位置 background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置 以上示例要確保正確顯示，需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是，如果使用了簡化寫法，只寫一個屬性值，另一個屬性值將會自動取中間值，為了將來管理方便，建議兩個方向的屬性值都寫上去比較好。 示例二、垂直置中對齊 body{ background-image:url('背景圖片'); //先給你想要放在背景的圖片路徑或網址 background-repeat:no-repeat; //背景圖片不要重覆顯示（僅顯示一次） background-attachment:fixed; //背景圖片位置固定 background-position:center; //背景圖片水平位置與垂直位置均置中對齊 } 垂直置中算是比較特別的一種寫法，只需要寫一個屬性值 center 即可，因為另外一個方向會自動取中間值。示例將背景圖片的位置設為固定（background-attachment:fixed）的主要原因是讓鼠標上下滑動的時候，背景圖片不會跟著被移動，不過這樣的效果只適用在網頁背景或是 textarea 這類網頁元素中，在 DIV 區塊內使用并沒有太大的意義。另外，background-position 不只是單純的用來設計網頁背景圖片位置，也能用來設計 DIV 區塊內的背景圖片位置，用法是一樣的。 background-repeat屬性
作用：設置是否及如何重復背景圖像。
基本語法：
background-repeat:repeat|repeat-x|repeat-y|no-repeat;
repeat：默認值，背景圖像將向垂直和水平方向重復。
repeat-x：只有水平位置會重復背景圖像。
repeat-y：只有垂直位置會重復背景圖像。
no-repeat：設置背景圖片不會重復。
說明：background-repeat屬性定義了圖像的平鋪模式。從原圖像開始重復，原圖像由background-image定義，并根據background-position的值放置。 該文章在 2022/10/21 17:50:28 編輯過
|
關鍵字查詢
相關文章
正在查詢... 
|
||||||||||||
400 186 1886
