định vị hình nền css (vị trí phủ định?)

Tôi đang cố gắng thêm một biểu tượng nằm trên đầu đường viền, chia nhỏ nó thành một nửa.định vị hình nền css (vị trí phủ định?)

Dưới đây là những gì tôi có cho đến nay:

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

Thay vì hình ảnh bị qua biên giới như tôi đã hy vọng, mình theo nó.

Nguồn

2009-06-28 Bryce Fischer

Hình nền nằm trong hộp để di chuyển bên ngoài không khả thi như thế này. Những gì bạn có thể làm là định vị hình ảnh của bạn bên ngoài hộp và di chuyển nó vào đó.

Bạn có thể thử một cái gì đó như thế này, nó không phải là dễ dàng nhưng có thể giúp bạn có được một số cách đó.

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

Nguồn

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>

Nguồn

2009-06-28 00:51:39 Sampson

Một cách khác là sử dụng lớp giả: sau khi tiêm một yếu tố sau hộp của bạn.

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>

Nguồn

2011-12-08 23:56:44 gagarine

Trong một số trường hợp nó sẽ phá vỡ giao diện người dùng hiện có, sau đó hãy thử thay đổi vị trí để được 'tuyệt đối' – didxga

Còn có một cách duy nhất sử dụng CSS3.

Tập hợp đầu tiên border-top: transparent, background-clip: border-box, sau đó vị trí phủ định là có thể.

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

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

Một cách khác để có được những tác dụng tương tự là bằng cách thêm thêm background-origin: border-box, sau đó vị trí nền âm không còn cần thiết.

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

Thông tin thêm:

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

Nguồn

2012-08-07 21:11:38 prz

định vị hình nền css (vị trí phủ định?)

Trả lời

Các vấn đề liên quan