发表新帖
发表新帖

css background image positioning (negative position?)

后端 未结
关注
4 1754
花落未央
花落未央 2020-12-17 01:13

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:
相关标签:
4条回答
  • 傲寒
    2020-12-17 01:34 
    #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>
    0 讨论(0)
  • 小蘑菇
    2020-12-17 01:45

    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>
    0 讨论(0)
  • 野性不改
    2020-12-17 01:46

    There is another way using CSS3 only.

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

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

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

    0 讨论(0)
  • 一向
    2020-12-17 01:50

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题