css實現背景圖拉伸

製作頁面時,有時需要在表格內插入背景圖,我們可以使用CSS進行控制,代碼:

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屬性,來實現,幾乎是無所不能啊。例子:
使用層實現的flash背景    <div style="position:relative">
      <EMBED style="position:absolute;z-index:0" src="http://www.68design.net/art/images/flash/20061121001.swf" quality=high width=554 height=121 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="opaque">
      <a href=http://www.homelabel.cn/ target="_blank" style="cursor:pointer">
        <div style="position:relative;filter:alpha(opacity=0);-moz-opacity:0;left:0;top:0; background:#CDEAF6;width:554px;height:121px;z-index:10">
        </div>
      </a>
    </div>



附:Css背景參數,用法
序號中文說明標記語法
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:背景顏色|背景圖象|背景重複|背景附件|背景位置}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章