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

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

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

repeat-x 這是不斷重覆至瀏覽器右邊界,而且隨瀏覽器,左右拉動而改變。
background-repeat: repeat-y; 只重覆y軸,執行結果如下:

repeat-y 只重覆到文字結束那行。
---------------
加入 CSS 樣式,background-position 顯示背景圖位置,它後面必需跟2個參數,
分別是上中下(top,center,bottom),左中右(left,center,right),各選其一。
例如:background-position: center center; 執行結果如下:

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

介紹大約就到這邊,不過我想只有background-repeat: no-repeat;這參數用的到吧,不然就不設都重覆。
.
沒有留言:
張貼留言
由於經常被灌水,所以您再發表留言之後,需要耐心的等待博客主之審核,於審核過後才會公開您的留言,因此請您不要重複的留言,謝謝您的留言。
Hello my friend, I have no money, I am very poor, My blog is super chill, I welcome your comments, but in order to maintain a healthy discussion, please avoid spam or irrelevant comments.