css arka plan görüntüsü konumlandırma (negatif konum?)

Sınırın en üstünde duran ve yarısına bölen bir simge eklemeye çalışıyorum. İştecss arka plan görüntüsü konumlandırma (negatif konum?)

Ben bugüne kadar ne: Ben umuyordum gibi

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

yerine görüntü

, sınırdan onun altında olması.

kaynak

2009-06-28 Bryce Fischer

Arka plan resmi kutunun içindedir, böylece dışarıda hareket etmek bu şekilde mümkün değildir. Yapabildiğiniz şey, görüntünüzü kutunun dışına konumlandırmak ve içine taşımaktır.

Böyle bir şeyi deneyebilirsiniz, bu kusursuz değildir, ancak sizi oradan biraz alabilir.

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

kaynak

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>

kaynak

2009-06-28 00:51:39 Sampson

başka yolu da sözde sınıfını kullanıyor: kutunuzun sonra bir öğe enjekte etmek sonra.

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>

kaynak

2011-12-08 23:56:44 gagarine

, daha sonra 'mutlak' olmaya konumunu değiştirmeyi deneyin – didxga

sadece CSS3 kullanarak başka bir yolu yoktur.

İlk set border-top: transparent, background-clip: border-box, sonra negatif arka plan konumu mümkündür.

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

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

aynı etkiyi elde etmek için başka bir yolu da ilave background-origin: border-box ekleyerek, daha sonra negatif arka plan konumu artık gereklidir.

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

diğer bilgiler: mevcut UI kıracak Bazı durumlarda

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

kaynak

2012-08-07 21:11:38 prz

css arka plan görüntüsü konumlandırma (negatif konum?)

cevap

İlgili konular