2010-07-24 252 views
3

是否有純CSS的方式設置您的div寬度的背景圖像的寬度,你正在使用該div?將div寬度設置爲背景圖像寬度Css?

比如我現在正在做這個...

#homeNav{ 

    background-image:url(../images/navPieces/home.jpg); 
    width:165px; 
    text-align:right; 

} 
#aboutNav{ 

    background-image:url(../images/navPieces/about.jpg); 
    width:81px; 
    text-align:center; 

} 
#competitorsNav{ 

    background-image:url(../images/navPieces/competitors.jpg); 
    width:117px; 
    text-align:center; 
} 

我很想不必在每一個div的寬度來寫。

有什麼建議嗎?

+2

Nav?你確定那些不應該是gif或png嗎? Jpeg有點...有損。 – BalusC 2010-07-24 02:32:22

+0

@BalusC,如果你想爲我分割這件事,我很樂意使用GIF或PNG。 – 2010-07-24 02:36:39

回答

3

不幸的是,沒有。 CSS不知道指定背景圖像的寬度。你可以用一些Javascript預先載入圖像,然後設置div寬度。

+0

確實。我寧願和它一起生活,也不願意用JS來解決它。這就是你得到的報酬。 – BalusC 2010-07-24 02:31:37

+0

無賴。我猜css不會做我想要的任何東西。 – 2010-07-24 02:37:23

3

我所做的:

  • 的backgound圖像設置爲與URL股利(urlsrc)
  • 一個img添加到與SRC在div = urlsrc
  • 獲得與.WIDTH IMG大小( )和.height()
  • 除去IMG
  • 設置CSS寬度和的div高度的寬度和高度較先計算

醜,但它的工作原理:p