posizionamento dell'immagine di sfondo css (posizione negativa?)

Sto provando ad aggiungere un'icona che si trova in cima al bordo, dividendola a metà.posizionamento dell'immagine di sfondo css (posizione negativa?)

Ecco quello che ho finora:

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

Invece di immagine di essere oltre il confine, come speravo, il suo sotto di essa.

fonte

2009-06-28 Bryce Fischer

L'immagine di sfondo si trova all'interno della scatola, quindi spostarla all'esterno non è fattibile in questo modo. Quello che potresti fare è posizionare la tua immagine fuori dalla scatola e spostarla in essa.

Puoi provare qualcosa del genere, non è infallibile ma puoi farti un po 'di strada.

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

fonte

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>

fonte

2009-06-28 00:51:39 Sampson

Un altro modo è usare la classe pseudo: dopo per iniettare un elemento dopo la tua casella.

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>

fonte

2011-12-08 23:56:44 gagarine

In alcuni casi si romperà l'interfaccia utente esistente, quindi provare cambiare posizione di essere 'assoluto' – didxga

C'è un altro modo utilizzando solo CSS3.

Primo set border-top: transparent, background-clip: border-box, quindi posizione sfondo negativo è possibile.

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

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

Un altro modo per ottenere lo stesso effetto è con l'aggiunta di ulteriore background-origin: border-box, quindi posizione di fondo negativo non è più necessaria.

.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; 
    /* ... */ 
}

Maggiori informazioni:

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

fonte

2012-08-07 21:11:38 prz

posizionamento dell'immagine di sfondo css (posizione negativa?)

risposta

Problemi correlati