設置背景圖已知有三種方法
background:url();//平鋪 background-image:url();//平鋪 border-image:url();//拉伸填充
其中第一種方法可以直接在尾部添加no-repeat阻止圖片平鋪;第二種則需要添加background-repeat語句:
background:url() no-repeat;//阻止平鋪 backgroundimage:url(); background-repeat:no-repeat;//阻止平鋪
在repeat中可以設置repeat-xy來限定橫縱方向的平鋪。
background中可以通過top bottom left right center五個關鍵字設置背景圖的位置,也可以通過margin-left和margin-top設定像素位置。
background-position:top right;//設定在右上方 margin-left:34; margin-top:34px;//設定背景圖左上角坐標在(34,34)位置
暫未找到background-image調整大小的方法,這點存疑。
下面說說border-image。它是對圖像進行縮放填充,有些細節要記錄一下:
border-image最多有5個參數分別是url 上右下左的距離(邊框大小)。參數可以省略或部分省略。
border:40;//等同於下 border-top:40; border-right:40; border-bottom:40; border-left:40;
以上效果是鎖定邊框的大小。
border-image:url()0 27; border-left:27; border-right:27; //以上初始化左右邊框為27,之后鎖定左右大小為27,只有拖拽都不會改變左右邊框的水平大小 //實際是講左右邊框進行了縮放,所以此時如果初始化未設定邊框大小,進行邊框設定時會默認原比例;而如果初始了邊框大小而未設置邊框縮放,則默認為0,效果即為邊框不顯示 border-image:url()0 27;//左右27px不顯示 border-image:url(); border-left:27; border-right:27;//效果和最上相同,將左右27px鎖定 border-image:url()0 15; border-left:27; border-right:27;//將左右15px拉伸至27px,鎖定不隨界面拉伸
加入把沒有像素的位置進行拉伸就可以實現透明區域,算是變相實現繪圖位置改變的一種手段了。
border-image:url()0; border:27;//四周顯示透明區域