css posición de la imagen de fondo (¿posición negativa?)

Estoy tratando de agregar un icono que se encuentra en la parte superior del borde, dividiéndolo por la mitad.css posición de la imagen de fondo (¿posición negativa?)

Esto es lo que tengo hasta ahora:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     body { 
      background-color:#26140C; 
     } 

     .box { 
      width: 800px; 
      margin: 0 auto; 
      margin-top: 40px; 
      padding: 10px; 
      border: 3px solid #A5927C; 

      background-color: #3D2216; 
      background-image: url(Contents/img/icon_neutral.png); 
      background-repeat: no-repeat; 
      background-position:10px -20px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <h1>This is a test!</h1> 
    </div> 
</body>

En lugar de ser la imagen de la frontera como yo esperaba, su bajo ella.

Fuente

2009-06-28 Bryce Fischer

La imagen de fondo está dentro del cuadro, por lo que moverlo al exterior no es posible así. Lo que podrías hacer es colocar tu imagen fuera de la caja y moverla hacia ella.

Puede probar algo como esto, no es infalible pero puede llevarlo consigo durante el camino.

<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
       body { 
         background-color:#26140C; 
       } 

       .box { 
         width: 800px; 
         margin: 0 auto; 
         margin-top: 40px; 
         padding: 10px; 
         border: 3px solid #A5927C; 

         background-color: #3D2216; 
       } 

       .image { 
        float: left; 
        position: relative; 
        top: -30px; 
       } 
     </style> 
</head> 
<body> 
     <div class="box"> 
      <img src='icon_neutral.png' class="image" /> 
       <h1>This is a test!</h1> 
     </div> 
</body>

Fuente

2009-06-28 00:47:47

#box { 
    position:relative; 
} 
#shield { 
    width:41px; 
    height:41px; 
    position:absolute; 
    top:-25px; 
    left:25px; 
} 

<div id="box"> 

    <div id="shield"> 
    <img src="shield.png" /> 
    </div> 

    <h1>Site Title</h1> 

</div>

Fuente

2009-06-28 00:51:39 Sampson

Otra forma es utilizar el pseudo clase: después de inyectar un elemento después de su caja.

CSS

.box{ 
    position:relative; 
    } 
    .box:after{ 
     content:url(icon_neutral.png); 
     display:block; 
     position:relative; 
     top: -30px; 
    }

HTML

<body> 
    <div class="box"> 
     <h1>This is a test!</h1> 
    </div> 
</body>

Fuente

2011-12-08 23:56:44 gagarine

En algunos casos será romper la interfaz de usuario existente, a continuación, intente cambiar la posición de ser 'absoluto' – didxga

Hay otra manera usando sólo CSS3.

Primer conjunto border-top: transparent, background-clip: border-box, luego posición de fondo negativa es posible.

.box { 
    border-top: 8px solid transparent; 
    background-clip: border-box; 
    background-position: 0 -8px; 

    background-image: url(image.png); 
    background-repeat: repeat-x; 
    /* ... */ 
}

Otra forma de obtener el mismo efecto es mediante la adición adicional background-origin: border-box, entonces posición de fondo negativo ya no es necesaria.

.box { 
    border-top: 8px solid transparent; 
    background-clip: border-box; 
    background-origin: border-box; 
    background-position: 0 0px; 

    background-image: url(image.png); 
    background-repeat: repeat-x; 
    /* ... */ 
}

Más información:

http://www.css3.info/preview/background-origin-and-background-clip/

Fuente

2012-08-07 21:11:38 prz

css posición de la imagen de fondo (¿posición negativa?)

Respuesta

Cuestiones relacionadas