CSS css背景图片被截断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2654346/
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 is being cut off
提问by Ronedog
I have an unordered list and the background image is being cut off when trying to place it next to the text.
我有一个无序列表，当试图将它放在文本旁边时，背景图像被截断了。
I'm using jquery to add the class to the anchor tag to display the image, and its working fine, the only problem is the image gets cut off. I've been playing around with the css, but can't seem to figure out how to make the image display properly...it seems like the < li > is hiding the image behind it somehow...can I place the image in front of the < li > to make it display...or am I missing something else?
我正在使用 jquery 将类添加到锚标记以显示图像，并且它工作正常，唯一的问题是图像被切断了。我一直在玩 css，但似乎无法弄清楚如何使图像正确显示......似乎 < li > 以某种方式将图像隐藏在它后面......我可以放置图像吗在 < li > 前面使其显示...还是我错过了其他东西？
Can someone help me? Thanks.
有人能帮我吗？谢谢。
Here's the HTML:
这是 HTML：
<ul id="nav>
<li>
<a class="folder_closed">Item 1</a>
<div style="display:none">Content for item 1</div>
</li>
</ul>
Here's the CSS:
这是CSS：
ul#nav{
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
#nav > li{
vertical-align: top;
text-align:left;
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
}
.folder_open{
position:relative;
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
.folder_closed{
position:relative;
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
采纳答案by Amy
This sounds like a line-height issue---just for experimentation try setting the LI "line-height: 40px;" and see if your image shows completely...
这听起来像是一个行高问题——只是为了实验，尝试设置 LI "line-height: 40px;" 并查看您的图像是否完全显示...
One of the things I do in this case is I use some absolute positioning. First to set it up you have to have your UL and LIs relatively-positioned:
在这种情况下我做的一件事是我使用了一些绝对定位。首先要设置它，您必须相对定位您的 UL 和 LI：
<style type="text/css">
ul, li {
position: relative;
}
</style>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
Then add some padding to the left side of the LI:
然后在 LI 的左侧添加一些填充：
<style type="text/css">
li {
padding-left: 30px;
}
</style>
In this case you're using an <A> anchor w/ some class styling. Break up the <A> into two As:
在这种情况下，您使用的是带有一些类样式的 <A> 锚点。将 <A> 分解为两个 As：
<li>
<a class="folder_icon folder_closed"></a>
<a class="folder_title">... your title ...</a>
... your other content ...
</li>
And then turn one of the As into blocked display:
然后将 As 之一变成块显示：
<style type="text/css">
li .folder_icon {
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 16px;
height: 16px;
}
li .folder_closed {
background-image: url("../images/minimize.png");
background-repeat: no-repeat;
background-position: -5px 1px;
}
</style>
How is that?
那个怎么样？
回答by Diodeus - James MacFarlane
You need to add display:blockand some dimensions (and perhaps some padding to make it look nice) to your A tag to ensure the element will be big enough to contain your background image.
您需要display:block在 A 标记中添加一些尺寸（可能还有一些填充以使其看起来不错），以确保元素足够大以包含您的背景图像。
You're better off transferring all of the styling to your A tag. Don't bother styling the LI tags at all (unless you need floats).
您最好将所有样式转移到您的 A 标签。根本不用为 LI 标签设置样式（除非您需要浮动）。
.folder_open{
vertical-align: top; <--- use padding to accomplish this instead
text-align:left; <-- this too
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
position:relative; <--- not needed.
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
display:block;
height: ??px;
width: ??px
}
回答by Armstrongest
It looks like it might be your background position... if I understand it properly, the maximize image is disappearing, correct?
看起来它可能是你的背景位置......如果我理解正确，最大化图像正在消失，对吗？
Also, one good practice, when specifying background images, I have found, is to explicitly set the background color to transparent.
此外，我发现在指定背景图像时，一种好的做法是将背景颜色显式设置为透明。
.folder_closed {
background: transparent url(../images/maximize.png) no-repeat scroll -5px 1px;
}
回答by ENSATE
add "line-height: ?px;" to the container style-sheet
将“ line-height: ?px;”添加到容器样式表
