style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;"
其中,./images/counter_bg.jpg爲顯示圖片路徑。
如果現在需要實現背景圖隨表格拉伸而不重複的拉伸填充,如何實現?
製作方法:
建立表格,並在<table>中插入CSS的一種濾鏡,代碼:
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/counter_bg.jpg', sizingMethod='scale')"
不過此方法僅支持Ie,並且在ie6中還存在一個問題,就是背景上方的超鏈接等元素會失效,暫時未找到好的解決方案。如果誰找到了,請留言。
另外,如果需要其他更復雜的效果,建議用層來實現了,利用層的z-index屬性,來實現,幾乎是無所不能啊。例子:
序號 | 中文說明 | 標記語法 |
1 | 背景顏色 | {background-color:數值} |
2 | 背景圖片 | {background-image: url(URL)|none} |
3 | 背景重複 | {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} |
4 | 背景固定 | {background-attachment:fixed|scroll} |
5 | 背景定位 | {background-position:數值|top|bottom|left|right|center} |
6 | 背影樣式 | {background:背景顏色|背景圖象|背景重複|背景附件|背景位置} |