Wie entferne ich den grauen Rahmen, der Hintergrundbilder umgibt?

Question

Ich habe auf ein interessantes Problem in der folgenden Codezeile kommen:

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

In Safari (zumindest), den 300x50px Bereich ein grauer Rand umgibt. Hinzufügen von style = "border: none;" entfernt es nicht. Irgendwelche Ideen?

Danke. Mike

Answer 1

Sie haben also ein img-Element, das kein src-Attribut hat, aber es wird ein Hintergrundbildstil angewendet.

Ich würde sagen, dass der graue Rahmen der "Platzhalter" für das Bild wäre, wenn Sie ein src-Attribut angegeben hätten.

Wenn Sie kein "Vordergrund" -Bild möchten, dann verwenden Sie kein IMG-Tag - Sie haben bereits festgestellt, dass die Änderung zu einem Div das Problem löst, warum nicht mit dieser Lösung gehen?

Answer 2

Versucht, den Rahmen auf 0px zu setzen?

EDIT: Ja, Sie sollen Hintergrundbilder in der CSS einer anderen Klasse haben. Doing in div oder im body-Tag (abhängig davon, was Sie tun wollen) wird funktionieren. Es stoppt auch das Hintergrundbild, das ein Element an sich ist, das den Fluss der Elemente auf der Seite schraubt und Ihre Positionierung durcheinander bringt.

<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; 
} 

oder

<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> 

Es ist am besten CSS seperate zu halten, da es sonst obwohl ein Teil des Punktes besiegt.

Answer 3

Versuchen Sie, diese anstelle von Hintergrund-Bildeinstellung:

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

Answer 4

versuchen <img border="0" />

, die den Trick tun sollten.

EDIT

Sorry, ich sehe, dass Sie etwas zu tun, sehr falsch .. Sie auf einem img-Tag ein Hintergrundbild setzen .., die nicht wirklich Sinn macht ...

anstelle eines ImageTag verwenden, um eine

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

oder wenn es sich um ein Bild, das Sie in diesem Bereich wollen, ist verwenden, um eine

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

Answer 5

wenn nur in Safari und nicht in anderen Browsern geschieht versuchen, den Browser CSS mit so etwas wie YUI CSS RESET

Der richtige Weg wäre es, zu trennen die CSS von Code neu einzugeben und eine CSS-Klasse für das Bild zu haben.

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

und in der CSS zu definieren, wie className aussieht. , className {border: 0;}

Answer 6

Img-Tags benötigen ein src-Attribut.

z.B.

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

Aber img ist nur für Inline (Vordergrund) Bilder. Wenn Sie tatsächlich das Bild wollen ein Hintergrund von etwas zu sein, müssen Sie den Stil auf das eigentliche Element anwenden Sie es der Hintergrund sein wollen:

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

Answer 7

Sie können auch hinzufügen, ein leeres Bild als Platzhalter :

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

Dies sollte es tun!

Answer 8

Versuchen Sie dieses, es hat für mich funktioniert (auf Chrom und Safari). Das war nicht die Grenze, sondern der Schatten, also füge bitte diese Zeile zum Tag hinzu:

{-webkit-box-shadow:none;} 

Hoffe, es funktioniert auch für dich.

Answer 9

Ich weiß, dass dies eine alte Frage, aber ich fand diese nützlich ..

Im Fall, dass Ihre Resources/bar.png ist ein Vordergrundbild in Form eines Sprites, macht es Sinn, eher einen img-Tag zu verwenden, als ein div. Wenn Sie dies tun, kann es hilfreich sein, eine transparente 1px-Bilddatei zu haben, die Sie für das Attribut src verwenden, und dann das Hintergrundbild wie hier z.

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

Hier stellen Sie x und y die Pixelposition auf dem Sprite sein, dass Sie das Bild wollen an starten. Diese Technik ist auch erklärt unter: http://www.w3schools.com/css/css_image_sprites.asp

Natürlich ist der Nachteil davon, dass es eine zusätzliche Anforderung gibt, aber es ist immer das gleiche transparente Bild für Sie Sprites es ist keine große Sache.

Answer 10

Eigentlich scheint dies zumindest auf Chrome zu arbeiten:

img { 
content: ""; 
} 

Answer 11

Ich hatte ein ähnliches Problem, bei dem meine ersten HTML ohne Quelle einen Image-Tag hatte. Mein Javascript hat festgestellt, welches Bild angezeigt werden soll. Bevor jedoch das Bild geladen wurde, sah der Benutzer die Platzhalterbox.

<img id="myImage"> 

Meine fix war der anfänglichen Bildtag CSS

#myImage { 
    display:none; 
} 

Und dann verwendet, um eine JQuery zu aktualisieren, es zu zeigen, wenn ihr Inhalt geladen wurde.

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

Answer 12

Im Folgenden wird CSS verwenden, um die src zu einem winzigen transparentes Bild zu setzen, die das Problem Attribut src löst, während die Steuerung von Bild beibehalten:

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

Mein Gesamt Ansatz ist es, die folgenden zu definieren in meiner reset.css, dann verwenden Sie eine Klasse, um das eigentliche Bild zur Verfügung zu stellen und es zu kontrollieren. Dieses verhält sich genau wie ein IMG, ist aber komplett CSS-gesteuert.

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; 
} 

Dank + programming_historian und + binnyb für die Daten: Bild Spitze