Wie entferne ich den grauen Rand, der Hintergrundbilder umgibt?

Lesezeit: 5 Minuten

Ich bin auf ein interessantes Problem in der folgenden Codezeile gestoßen:

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

In Safari (zumindest) umgibt ein grauer Rahmen den 300 x 50 Pixel großen Bereich. style=”border: none;” hinzufügen entfernt es nicht. Irgendwelche Ideen?

Vielen Dank. Mike

  • Funktioniert nicht. Der Rahmen erscheint nicht, wenn ich das img-Tag durch ein div-Tag ersetze … Soll es so gemacht werden?

    – Michael Swarts

    2. Juli 2009 um 7:51 Uhr

  • ändern Sie das CSS der Seite dynamisch mit Javascript?

    – Elzo Valugi

    2. Juli 2009 um 7:51 Uhr

  • Napster hat Recht. du machst das falsch. background ist eine CSS-Eigenschaft für Bilder. Schauen Sie sich mein Beispiel für die richtigen Bildparameter an

    – Elzo Valugi

    2. Juli 2009 um 7:56 Uhr

  • aus css tricks, 1×1 base 64 transparent img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

    – Neumusik

    15. Juli 2015 um 3:11 Uhr


  • Browser fügen diese Ränder automatisch hinzu, wenn nein src wird vorgestellt. @neaumusic dein Trick hat mir eine weitere Stunde Arbeit erspart.

    – Emre A

    18. September 2020 um 15:33 Uhr


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

Ich würde sagen, dass der graue Rand der „Platzhalter“ dafür ist, wo sich das Bild befinden würde, wenn Sie ein src-Attribut angegeben hätten.

Wenn Sie kein ‘Vordergrund’-Bild möchten, verwenden Sie kein img-Tag – Sie haben bereits gesagt, dass der Wechsel zu einem div das Problem löst, warum gehen Sie nicht mit dieser Lösung?

  • Richtig. Ich denke genau das ist es. Ich habe es mit div behoben. Ich wusste nicht, dass das img-Tag nur für Vordergrundbilder gedacht ist. Aber ja, das ist die Antwort, soweit ich das beurteilen kann.

    – Michael Swarts

    2. Juli 2009 um 7:58 Uhr

  • Freut mich, dass ich helfen konnte – besteht die Möglichkeit, dass Sie meine Antwort als akzeptiert markieren?

    – Belugabob

    2. Juli 2009 um 17:21 Uhr

  • Es ist traurig, dass CSS3 den Benutzer dazu zwingt, diesen hässlichen Standardrahmen zu haben. Deshalb versuche ich, schreckliche vorgefertigte Tags wie „img“ zu vermeiden.

    – Ian Steffy

    8. Oktober 2014 um 19:00 Uhr

  • HTML sollte beschreibend sein, und wenn Sie Ihre Bilder mit CSS verwalten möchten, sollten Sie Ihr HTML nicht ändern …

    – Florian Leitgeb

    10. Juli 2017 um 14:20 Uhr

  • Dafür gibt es eine Lösungsklasse, beim Hinzufügen des Attributs alt und src empty verschwindet der graue Rand.

    – Alejo Florez

    16. März 2018 um 16:50 Uhr

Benutzer-Avatar
Benutzer424540

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

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

Das sollte reichen!

  • Oder ein noch kleineres Bild (GIF statt PNG): <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

    – James

    22. September 2014 um 20:44 Uhr

  • hat bei mir funktioniert, danke! Der GIF-Vorschlag von @binnyb hat jedoch nicht funktioniert.

    – Marmor

    21. Juli 2016 um 9:00 Uhr

Eigentlich scheint dies zumindest auf Chrome zu funktionieren:

img {
 content: "";
}

  • Das macht den Trick (zusammen mit display: inline-block um die Abmessungen beizubehalten), aber es behält ein leeres Bild bei, auch wenn das Quellbild nicht beschädigt ist …

    – Robert Koritnik

    16. April 2014 um 16:10 Uhr

  • Ihre kombinierten Antworten sind die Lösung für Chrome. In FF gibt es jedoch nicht nur einen Rand, sondern auch ein Symbol für ein kaputtes Bild. Kompatibilität…. 🙁

    – Grüner alter Mann

    22. Dezember 2014 um 6:58 Uhr

  • Mit Chome 59 wird die Grenze immer noch mit beiden angezeigt, aber der Hack src=’data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==’ behebt es immer noch.

    – Regenabba

    2. April 2016 um 0:05 Uhr

Benutzer-Avatar
Regenabba

Im Folgenden wird CSS verwendet, um src auf ein winziges transparentes Bild zu setzen, das das Problem mit dem src-Attribut löst, während die Kontrolle über das Bild beibehalten wird:

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

Mein allgemeiner Ansatz besteht darin, Folgendes in meiner reset.css zu definieren und dann eine Klasse zu verwenden, um das eigentliche Bild bereitzustellen und es zu steuern. Dies verhält sich wie ein Bild, ist aber vollständig 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;
}

Danke an +programming_historian und +binnyb für den data:image-Tipp

Benutzer-Avatar
Der echte Napster

Versuchen <img border="0" />

Das sollte reichen.

BEARBEITEN

Tut mir leid, ich sehe, dass Sie etwas sehr falsch machen. Sie setzen ein Hintergrundbild auf ein img-Tag. Das ergibt keinen Sinn …

Verwenden Sie anstelle eines Image-Tags a

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

oder wenn es sich um ein Bild handelt, das Sie in diesem Bereich haben möchten, verwenden Sie a

<img src="https://stackoverflow.com/questions/1073015/Resources/bar.png" border="0" Width="500px" Height="300" />

Benutzer-Avatar
Gerad

img-Tags benötigen ein src-Attribut.

z.B,

<img src="https://stackoverflow.com/questions/1073015/Resources/bar.png" alt="bar" width="300" height="50" />

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

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

Versucht, den Rand auf 0px zu setzen?

EDIT: Ja, Sie sollen Hintergrundbilder im CSS einer anderen Klasse haben. Wenn Sie dies in div oder im Body-Tag tun (je nachdem, was Sie zu tun versuchen), wird es funktionieren. Es verhindert auch, dass das Hintergrundbild ein Element an sich ist, das den Fluss der Elemente auf der Seite durcheinander bringen und Ihre Positionierung durcheinander bringen würde.

<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 getrennt zu halten, da es sonst einen Teil des Punktes zunichte macht.

  • Ja. Funktioniert nicht. Es sieht aus wie eine Grenze, aber es scheint sich wie etwas anderes zu verhalten.

    – Michael Swarts

    2. Juli 2009 um 7:48 Uhr

1245330cookie-checkWie entferne ich den grauen Rand, der Hintergrundbilder umgibt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy