css背景图像定位（负面位置？）

I'm trying to add an icon which sits on top of the border, splitting it in half.

我正在尝试添加一个位于边框顶部的图标,将其分成两半。

Here is what I have so far:

这是我到目前为止:

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

Instead of image being over the border like I was hoping, its under it.

而不是像我希望的那样,图像越过边界,而是在它之下。

4 个解决方案

#1

The background image is within the box so moving it outside is not feasible like this. What you could do is position your image outside of the box and move it into it.

背景图像在框内,因此将其移到外面是不可行的。您可以做的是将图像放在盒子外面并将其移入盒子中。

You can try something like this, it's not foolproof but can get you some of the way there.

你可以尝试这样的东西,这不是万无一失的,但可以让你在那里的一些方式。

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

#2

Another way is using the pseudo class :after to inject an element after your box.

另一种方法是使用伪类:在你的盒子之后注入一个元素。

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>

#3

There is another way using CSS3 only.

还有另一种方法只使用CSS3。

First set border-top: transparent, background-clip: border-box, then negative background-position is possible.

首先设置border-top:透明,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;
   /* ... */
}

Another way to get the same effect is by adding additional background-origin: border-box, then negative background position is no longer required.

另一种获得相同效果的方法是添加额外的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;
   /* ... */
}

More info:

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

#4

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

#1