如何去除圍繞背景圖像的灰色邊框？

我遇到了一個有趣的問題，在下面的代碼行：如何去除圍繞背景圖像的灰色邊框？

<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>

在Safari（至少），灰色邊框包圍300x50px區域。添加style =「border：none;」不會刪除它。有任何想法嗎？

謝謝。邁克

來源

2009-07-02 Michael Swarts

嘗試「邊界：0;」 – 2009-07-02 07:47:02

不起作用。如果我用div標籤替換img標籤，邊框不會出現......是否應該這樣做？ – 2009-07-02 07:51:18

您是否使用javascript動態更改頁面的CSS？ – 2009-07-02 07:51:28

因此，您有一個img元素沒有src屬性，但它確實應用了背景圖像樣式。

我想說，如果你指定了一個src屬性，那麼灰色邊框就是圖像所在位置的'佔位符'。

如果您不想使用「前景」圖片，那麼請勿使用img標籤 - 您已經聲明更改爲div可以解決問題，爲什麼不使用該解決方案？

來源

2009-07-02 07:55:26 belugabob

試圖將邊框設置爲0px？

編輯：是的，你的意思是在另一個類的CSS中有背景圖像。在div或body標籤（取決於你想要做的）做它會起作用。它也會阻止背景圖像本身是一個元素，這會影響頁面上元素的流動並使您的位置變得糟糕。

<div class="myDivClass">content to go on TOP of the background image</div>

CSS：

.myDiVClass 
{ 
background: url(Resources/bar.png) no-repeat; 
width: 300px; 
height: 50px; 
}

或

<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>

這是最好保持CSS單獨的，因爲它違背，否則點的一部分雖然。

來源

2009-07-02 07:46:25 Damien

嘗試設置這個代替的背景圖像：

background: url(Resources/bar.png) no-repeat;

來源

2009-07-02 07:47:47 Wolfr

嘗試<img border="0" />

這應該做的伎倆。

編輯

對不起，我看到你正在做的事情非常錯誤的..你在一個img標籤..這並沒有真正意義設置背景圖片...而不是

一個imagetag使用

<div style="background-image: url(Resources/bar.png);"></div>

，或者如果它是你在這方面需要一個像使用

<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

來源

2009-07-02 07:48:07

如果發生只有Safari，而不是在其他瀏覽器嘗試重置使用的東西，瀏覽器CSS像YUI CSS RESET

正確的方式，它是將CSS從代碼中分離出來，並具有對圖像的CSS類。

<img src='whatever.png' alt='whatever' class='className' />

並在css中定義了什麼className的樣子。，className {border：0;}

來源

2009-07-02 07:50:24

img標籤需要一個src屬性。

例如，

<img src="Resources/bar.png" alt="bar" width="300" height="50" />

但是IMG僅用於內聯（前景）圖像。如果你真的想要的形象是什麼背景，你需要將樣式應用到你希望它是背景的實際元素：

<div style="background-image:url(Resources/bar.png);">...</div>

來源

2009-07-02 07:59:47 Geerad

您還可以添加一個空白圖像作爲佔位符：

img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='

這應該做的伎倆！

來源

2010-08-18 21:04:18 user424540

試試這個，它爲我工作（在鉻和Safari）。這不是邊界，但影子，所以請將此行添加到標籤：

{-webkit-box-shadow:none;}

希望它爲你工作了。

來源

2011-03-21 22:13:58

我知道這是一個老問題，但我發現這個有用的..

在您Resources/bar.png是一個精靈的形式前景圖像的情況下，是有意義的使用img標籤，而不是div。當你這樣做時，你可以使用一個1px的透明圖像文件作爲src屬性，然後像這樣設置背景圖像。

<img src="transparent.png" style="background: url(sprite.png) x y" />

在這裏你設置x和y是在你想要的形象在啓動精靈的像素位置。這種技術也是在解釋說：http://www.w3schools.com/css/css_image_sprites.asp

當然這種方法的缺點是，有一個額外的要求，但你總是使用相同的透明圖像爲您精靈這不是一個巨大的交易。

來源

2012-01-13 09:35:01

其實，這似乎在Chrome至少工作：

img { 
content: ""; 
}

來源

2012-09-13 18:50:38

我也有類似的問題，即我最初的HTML有沒有源的圖像標籤。我的Javascript確定要顯示哪個圖像。然而，在加載圖像之前，用戶看到了佔位符框。

<img id="myImage">

我的修復是對初始圖像標籤CSS更新到

#myImage { 
    display:none; 
}

然後使用jQuery來顯示它一旦其內容加載。

$('#myImage') 
.attr('src', "/img/" + dynamicImage + '.png') 
.fadeTo(500, 1);

來源

2014-02-20 13:45:47 wolfstevent

下面將使用CSS到src設置解決了src屬性問題，同時保持圖像控制一個微小的透明圖像：

content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

我的總的方法是定義如下在我的reset.css中，然後使用一個類來提供實際的圖像並對其進行控制。這表現就像一個img，但完全由css控制。

img { 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    display: inline-block; 
    *display: inline; 
    vertical-align: middle; 
    * 
    vertical-align: auto; 
    font: 0/0 serif; 
    text-shadow: none; 
    color: transparent; 
    background-size: contain; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    box-sizing: border-box; 
} 

img:not([src]) { 
    content:    url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); 
} 

.myuniqueimage { 
    background-image: url('../images/foobar.png'); 
    height: 240px; 
}

由於+ programming_historian和+ binnyb用於數據：圖像尖端

來源

2016-04-02 00:13:13 rainabba

如何去除圍繞背景圖像的灰色邊框？

回答

相關問題