CSS——背景(background)和列表(list-style)
阿新 • • 發佈:2018-12-15
背景
background-attachment圖片滾動條滾動
div
{
width: 300px;
height: 2000px;
background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg);
background-repeat: no-repeat;
/*background-attachment: scroll;
不滾動一直存在頁面中*/
background-attachment: fixed;
/*跟隨滾動過去*/
}
background-position背景定位
div { width: 300px; height: 2000px; border: 1px red solid; background-repeat: no-repeat; background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg); } /*background-position: 50px 50px; 距離上下50px;*/ /*background-position: 10% 10%; 距離上下10%距離*/ /*background-position: left; 距離上下預設居中,然後在最左側,right相同*/ /*background-position: bottom; 距離左右預設居中,然後位於最底部,top相同*/ /*background-position: center; 左右居中*/
background-repeat
div { width: 1000px; height: 1000px; background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg); } /*background-repeat: no-repeat; 不重複顯示*/ /*background-repeat: repeat; 重複顯示,這是預設值,水平垂直全部重複*/ /*background-repeat: repeat-x; 水平方向重複顯示*/ /*background-repeat: repeat-y; 垂直方向重複顯示*/
背景縮寫
background: #000000 url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg)
no-repeat right fixed;
/*空格隔開*/
列表樣式
增加圖片背景
list-style-image: url();
/*輸入檔案地址即可既可*/
列表樣式
list-style-type: upper-roman;
list-style-position: inside;
/*預設是outside,標籤在欄位外*/
none 無標記。 disc 預設。標記是實心圓。 circle 標記是空心圓。 square 標記是實心方塊。 decimal 標記是數字。 decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。) lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。) upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。) lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小寫希臘字母(alpha, beta, gamma, 等。) lower-latin 小寫拉丁字母(a, b, c, d, e, 等。) upper-latin 大寫拉丁字母(A, B, C, D, E, 等。) hebrew 傳統的希伯來編號方式 armenian 傳統的亞美尼亞編號方式 georgian 傳統的喬治亞編號方式(an, ban, gan, 等。) cjk-ideographic 簡單的表意數字 hiragana 標記是:a, i, u, e, o, ka, ki, 等。(日文片假名) katakana 標記是:A, I, U, E, O, KA, KI, 等。(日文片假名) hiragana-iroha 標記是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) katakana-iroha 標記是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)