javascript - sirve - ¿Cómo elimino el borde gris que rodea las imágenes de fondo?
material gris (12)
He encontrado un problema interesante en la siguiente línea de código:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
En Safari (al menos), un borde gris rodea el área de 300x50px. Añadiendo style = "border: none;" no lo elimina ¿Algunas ideas?
Gracias. Micro
¿Intentó establecer el borde a 0px?
EDIT: Sí, está destinado a tener imágenes de fondo en el css de otra clase. Hacerlo en div o en la etiqueta del cuerpo (dependiendo de lo que intentes hacer) funcionará. También evita que la imagen de fondo sea un elemento en sí mismo que podría atornillar el flujo de elementos en la página y desordenar su posicionamiento.
<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;
}
o
<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>
Sin embargo, es mejor mantener CSS separado, ya que de otro modo vence parte del punto.
En realidad, esto parece funcionar al menos en Chrome:
img {
content: "";
}
Entonces, tienes un elemento img que no tiene un atributo src, pero tiene un estilo de imagen de fondo aplicado.
Diría que el borde gris es el "marcador de posición" para la ubicación de la imagen, si hubiera especificado un atributo src.
Si no quieres una imagen de ''primer plano'', entonces no uses una etiqueta img; ya has dicho que cambiar a un div resuelve el problema, ¿por qué no ir con esa solución?
Intenta configurar esto en lugar de la imagen de fondo:
background: url(Resources/bar.png) no-repeat;
Las etiquetas img necesitan un atributo src.
p.ej,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
Pero img es solo para imágenes en línea (en primer plano). Si realmente desea que la imagen sea un fondo de algo, debe aplicar el estilo al elemento real que desea que sea el fondo de:
<div style="background-image:url(Resources/bar.png);">...</div>
Lo siguiente usará css para establecer el src en una pequeña imagen transparente que resuelva el problema del atributo src mientras mantiene el control de la imagen:
content:url(''data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'')
Mi enfoque general es definir lo siguiente en mi reset.css, luego usar una clase para proporcionar la imagen real y controlarla. Esto se comporta como un img, pero está completamente controlado por 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;
}
Gracias a + schedule_historian y + binnyb por los datos: consejo de imagen
Prueba este, funcionó para mí (en Chrome y Safari). Ese no era el borde sino la sombra, así que agregue esta línea a la etiqueta:
{-webkit-box-shadow:none;}
Espero que funcione para usted también.
Sé que esta es una vieja pregunta pero encontré esto útil ...
En el caso de que tu Resources/bar.png sea una imagen de primer plano en forma de sprite, tiene sentido usar una etiqueta img lugar de una div . Cuando haga esto, puede ayudar a tener un archivo de imagen transparente de 1px que use para el atributo src , luego configure la imagen de fondo como lo hace aquí, por ejemplo
<img src="transparent.png" style="background: url(sprite.png) x y" />
Aquí establece que x e y son la posición de píxel en el sprite en el que desea que empiece la imagen. Esta técnica también se explica en: http://www.w3schools.com/css/css_image_sprites.asp
Por supuesto, el inconveniente de esto es que hay una solicitud adicional, pero si siempre usas la misma imagen transparente para tus sprites, no es un problema enorme.
Si está sucediendo solo en Safari y no en otros navegadores, intente restablecer el CSS del navegador usando algo como YUI CSS RESET
La forma correcta sería separar el css del código y tener una clase CSS para la imagen.
<img src=''whatever.png'' alt=''whatever'' class=''className'' />
y en el css para definir el aspecto de className. , className {border: 0;}
También puede agregar una imagen en blanco como marcador de posición:
img.src=''data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==''
¡Esto debería funcionar!
Tuve un problema similar en el que mi código HTML inicial tenía una etiqueta de IMAGEN sin origen. Mi Javascript determinó qué imagen mostrar. Sin embargo, antes de cargar la imagen, el usuario vio el cuadro del marcador de posición.
<img id="myImage">
Mi solución fue actualizar la etiqueta de imagen inicial CSS
#myImage {
display:none;
}
Y luego usó una JQuery para mostrarla una vez que se cargó su contenido.
$(''#myImage'')
.attr(''src'', "/img/" + dynamicImage + ''.png'')
.fadeTo(500, 1);
prueba <img border="0" />
Eso debería hacer el truco.
EDITAR
Lo siento, veo que estás haciendo algo muy mal ... estás configurando una imagen de fondo en una etiqueta img ... eso realmente no tiene sentido ...
En lugar de utilizar una etiqueta de imagen
<div style="background-image: url(Resources/bar.png);"></div>
o si es una imagen que desea en esa área use una
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />