CSS 之 背景 (background) 屬性說明

由於html語法會被解析,所以不能發code,用圖片代替。

backgroundxs01.gif

p {
background-image: url(img.gif);
}
執行結果:

.
由於html語法會被解析,所以不能發code,用圖片代替。

backgroundxs01.gif

p {
background-image: url(img.gif);
}
執行結果:

backgroundxs02.gif

加入 CSS 樣式,background-repeat 是否重覆,預設是x軸和y軸重覆執行結果如上圖。
p {
background-image:url(img.jpg);
background-repeat: no-repeat;
}

background-repeat: no-repeat; 不重覆背景圖片,執行結果如下:

backgroundxs03.gif

background-repeat: repeat-x; 只重覆x軸,執行結果如下:

backgroundxs04.gif

epeat-x 這是不斷重覆至瀏覽器右邊界,而且隨瀏覽器,左右拉動而改變。

background-repeat: repeat-y; 只重覆y軸,執行結果如下:

backgroundxs05.gif

repeat-y 只重覆到文字結束那行。

---------------
加入 CSS 樣式,background-position 顯示背景圖位置,它後面必需跟2個參數,

分別是上中下(top,center,bottom),左中右(left,center,right),各選其一。

例如:background-position: center center; 執行結果如下:

backgroundxs06.gif

那2參數也可以設%來調整位置,如 background-position: 30% 30%; 執行結果如下:

backgroundxs07.gif

介紹大約就到這邊,不過我想只有background-repeat: no-repeat;這參數用的到吧,不然就不設都重覆。

.

發表留言

秘密留言

五花八門

 

 

 

友站連結
Welcome
您可以分享文章超連結
,但請不要複製或轉載
文章內容,阿里阿度。
多彩多姿

 

類別
訪客計數器