css背景图像定位（负位置？） [英] css background image positioning (negative position?)
本文介绍了css背景图像定位（负位置？）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图添加一个位于边框顶部的图标，将其分成两半。
I'm trying to add an icon which sits on top of the border, splitting it in half.
这里是我到目前为止：
<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>
推荐答案
背景图片在框内，所以移动到外面是不可行的这个。你可以做的是把你的图像放在盒子外面并移动到它。
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>
这篇关于css背景图像定位（负位置？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
