2013-09-23 119 views
2

我無法從我的圖像中刪除邊框。我已經嘗試了很多次不同的屬性。仍然看到白色邊框。如果您有任何問題,請向我解釋。我有點新手。我無法刪除邊框

<head> 
    <style> 
    img{ 
    border : none; 
    text-decoration: none; 
    } 
    #forum 
    { 
     background:url(forum_button.png) 0px 0px no-repeat; 
     width: 300px; 
     height: 81px; 

    } 
    #forum:hover 
    { 
     background:url(forum_button.png) -300px 0px no-repeat; 
     width: 300px; 
     height: 81px; 
    } 
    #facebook 
    { 
     background:url(social_buttons.png) 0px 0px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #facebook:hover 
    { 
     background:url(social_buttons.png) 0px -33px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #twitter 
    { 
     background:url(social_buttons.png) -31px 0px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    #twitter:hover 
    { 
     background:url(social_buttons.png) -31px -33px no-repeat; 
     width: 29px; 
     height: 29px; 
    } 
    </style> 
    </head> 
    <body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;"> 
    <a href="#"><img id="forum" /></a> 
    <div id="social"> 
    <a href="#"><img id="facebook"></a> 
    <a href="#"><img id="twitter"></a> 
    </div> 
+0

確定的IMG元素是正確的寬度和高度,你所使用的圖像? :) – Pawcu

+0

我會建議不要使用沒有src屬性的img標籤。 –

+1

請顯示截圖並顯示圖片。 – MMM

回答

5

這是因爲一個img標籤必須有一個src =「」有一個適當的鏈接,否則它會顯示圖像作爲背景像你的情況(因爲imss上的css)和一個破碎的圖像它

="#"><img id="facebook"></ 

它不是一個邊框,你看到的是破碎的圖像邊框。

如果你要保持你的代碼,img標籤更改爲一個div ..

+0

我認爲你基本上是正確的。問題出現在Chrome中,而不是Firefox。 –

+0

謝謝。有用! :D我已經更改爲div,現在它運行完美。再次感謝! – Ivelios

0

也許邊界不是給定的HTML,但它在你的IMG?

因此,在像Photoshop這樣的圖像程序工具中打開您的圖像,並縮放到邊框所在的位置並查看,如果有邊框。

+0

我檢查了兩次。沒有邊界。我擴大了畫布大小,以便看到「隱藏」一個但沒有 - 圖像中沒有邊框。 – Ivelios

+0

爲什麼你將你的img作爲背景進行整合,而不是隻將它們設置爲img標籤中的src屬性? –

0

這可能是因爲您的img標籤上沒有src屬性。我會推薦在你的情況下使用透明像素作爲src。

0
  • 使用具有適當高度和寬度的img src插入圖像。
  • 使用Paint或其他工具編輯圖像。例如 。
  • 確保您的原始圖像沒有任何邊框,如果它只是簡單地選擇和裁剪圖像。
0

變化

border : none; 

border : none !important; 

這樣,它會因此覆蓋所有家長的聲明有工作。

0

正在嘗試使用可在懸停事件被重新定位背景圖像的鏈接設置的圖標圖像。

這樣做的最簡單方法如下。

的HTML可以是簡單的:

<a class="test" id="test" href="#"></a> 

並應用以下CSS:

.test { 
    background: beige url(http://placekitten.com/50/50) center center no-repeat; 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border: none; 
} 

應用鏈路(a標籤)上的背景圖像,而不是一個img標籤的,這不需要。

見的演示:http://jsfiddle.net/audetwebdesign/qAeHL/