Html css背景图像定位（负位置？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1053950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background image positioning (negative position?)
提问by Bryce Fischer
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.
图像并没有像我希望的那样越过边界，而是在边界之下。
回答by gagarine
Another way is using the pseudo class :after to inject an element after your box.
另一种方法是使用伪类 :after 在你的盒子后面注入一个元素。
CSS
CSS
.box{
position:relative;
}
.box:after{
content:url(icon_neutral.png);
display:block;
position:relative;
top: -30px;
}
HTML
HTML
<body>
<div class="box">
<h1>This is a test!</h1>
</div>
</body>
回答by ólafur Waage
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>
回答by prz
There is another way using CSS3 only.
还有另一种仅使用 CSS3 的方法。
First set border-top: transparent, background-clip: border-box, then negative background-positionis possible.
首先设置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;
/* ... */
}
Another way to get the same effect is by adding additional background-origin: border-box, then negative background positionis 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/
http://www.css3.info/preview/background-origin-and-background-clip/
回答by Sampson
#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>
