css背景画像の配置（負の位置？）

私は、境界の上に座っているアイコンを半分に分割して追加しようとしています。ここでcss背景画像の配置（負の位置？）

は、私がこれまで持っているものです。

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

代わりの画像私はそのそれの下で、期待していたように国境を越えています。

出典

2009-06-28 Bryce Fischer

背景画像はボックス内にあるので、外側に移動することはこのようには実行できません。あなたができることは、あなたのイメージを箱の外に置き、それを箱の中に移動することです。

あなたはこのようなものを試すことができますが、それは簡単ではありませんが、そこにいくらかの方法を得ることができます。

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

出典

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>

出典

2009-06-28 00:51:39 Sampson

もう一つの方法は、疑似クラスを使用している：あなたのボックスの後に要素を注入した後。

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>

出典

2011-12-08 23:56:44 gagarine

、その後、 '絶対' であると位置を変更してみてください – didxga

のみCSS3を使用して別の方法があります。

最初のセットborder-top: transparent,background-clip: border-box、次に負のバックグラウンドポジションが可能です。

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

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

同じ効果を得るための別の方法は、追加のbackground-origin: border-boxを追加することである、そして負のバックグラウンド位置はもはや必要ありません。

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

詳細情報：それは既存のUIを破るだろういくつかのケースでは

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

出典

2012-08-07 21:11:38 prz

css背景画像の配置（負の位置？）

答えて

関連する問題