Comment supprimer la bordure grise entourant les images d'arrière-plan?

Question

Je suis tombé sur un problème intéressant dans la ligne de code suivante:

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

Dans Safari (au moins), une bordure grise entoure la zone 300x50px. Ajout de style = "border: none;" ne l'enlève pas. Des idées?

Merci. Mike

Answer 1

Donc, vous avez un élément img qui n'a pas d'attribut src, mais qui a un style d'image d'arrière-plan appliqué.

Je dirais que la bordure grise est l'espace réservé pour l'image, si vous avez spécifié un attribut src.Si vous ne voulez pas d'image «de premier plan», n'utilisez pas de balise img. Vous avez déjà déclaré que le passage à un div résout le problème, pourquoi ne pas utiliser cette solution?

Answer 2

Vous avez essayé de définir la bordure sur 0px?

EDIT: Oui, vous êtes censé avoir des images d'arrière-plan dans le CSS d'une autre classe. Le faire dans div ou dans l'étiquette du corps (en fonction de ce que vous essayez de faire) fonctionnera. Il arrête également l'image d'arrière-plan étant un élément en lui-même qui permettrait de visser le flux des éléments sur la page et de gâcher votre positionnement.

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

ou

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

Il est préférable de garder séparé CSS comme il vainc par ailleurs partie du point cependant.

Answer 3

Essayez le réglage au lieu de ce background-image:

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

Answer 4

essayer <img border="0" />

Cela devrait faire l'affaire.

EDIT

Désolé, je vous vois en train de faire quelque chose de très mal .. vous définissez une image d'arrière-plan sur une balise img .. qui ne fait pas vraiment de sens ...

au lieu d'un ImageTag utiliser un

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

ou si elle est une image que vous voulez dans cette zone utiliser un

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

Answer 5

si se passe seulement dans Safari et non dans d'autres navigateurs tentent de réinitialiser le CSS du navigateur en utilisant quelque chose comme YUI CSS RESET

La bonne façon serait de séparer le css de code et d'avoir une classe CSS pour l'image.

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

et dans le CSS pour définir à quoi ressemble className. , className {border: 0;}

Answer 6

Les balises img nécessitent un attribut src.

par exemple,

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

Mais img est seulement pour les images en ligne (avant-plan). Si vous voulez vraiment l'image d'être un fond de quelque chose, vous devez appliquer le style à l'élément réel que vous voulez qu'il soit l'arrière-plan:

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

Answer 7

Vous pouvez également ajouter une image vierge en tant que support de lieu :

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

Cela devrait faire l'affaire!

Answer 8

Essayez celui-ci, cela a fonctionné pour moi (sur chrome et Safari). Ce n'était pas la frontière mais l'ombre, alors s'il vous plaît ajouter cette ligne à l'étiquette:

{-webkit-box-shadow:none;} 

Espérons que cela fonctionne pour vous aussi.

Answer 9

Je sais que c'est une vieille question, mais je trouve cela utile ..

Dans le cas où votre Resources/bar.png est une image de premier plan sous la forme d'une image-objet, il est logique d'utiliser une balise img plutôt qu'une div. Lorsque vous faites cela, il peut être utile d'avoir un fichier d'image 1px transparent que vous utilisez pour l'attribut src, puis définissez l'image d'arrière-plan comme vous le faites ici par exemple.

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

Ici vous définissez x et y être la position de pixel sur l'image-objet que vous voulez que l'image commence à. Cette technique est également expliquée à:

Bien sûr, l'inconvénient est qu'il y a une demande supplémentaire, mais vous utilisez toujours la même image transparente pour les sprites, ce n'est pas une grosse affaire.

Answer 10

En fait, cela semble fonctionner au moins sur Chrome:

img { 
content: ""; 
} 

Answer 11

J'ai eu un problème similaire où mon HTML initial avait une balise d'image sans source. Mon Javascript a déterminé quelle image montrer. Toutefois, avant que l'image ne soit chargée, l'utilisateur a vu la boîte de l'espace réservé.

<img id="myImage"> 

Ma solution était de mettre à jour la balise image initiale CSS pour

#myImage { 
    display:none; 
} 

Et puis utilisé un JQuery pour montrer une fois que son contenu a été chargé.

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

Answer 12

qui suit utilisera css pour régler le src à une petite image transparente qui résout le problème de l'attribut src tout en maintenant le contrôle de l'image:

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

Mon approche globale est de définir les éléments suivants Dans mon fichier reset.css, utilisez une classe pour fournir l'image réelle et la contrôler. Cela se comporte comme un img, mais est entièrement contrôlé par 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; 
} 

Merci à + programming_historian et + binnyb pour les données: l'image pointe