[英]HTML: span with a background color and image — why doesn't the color appear under the image?
I'm trying to add an arrow image beside the text within a span. 我正在尝试在跨度内的文本旁边添加箭头图像。 Here's the HTML I'm working with: 这是我正在使用的HTML:
<span id="status" class='unreviewed'>
Unreviewed
<img src="bullet_arrow_down.png" />
</span>
Now, I've coloured the background of the span with this css: 现在,我用这个css为跨度的背景着色:
#status {
float: right;
position: relative;
cursor: pointer;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
color:#FFFFFF;
font-size: 1.8em;
top: 10px;
}
#status span.unreviewed {
padding: 3px 4px;
background:#DA704B none repeat scroll 0 0;
}
#status span.unreviewed img {
float: right;
}
Now, this displays everything correctly lined up, but the background colour doesn't extend past the end of the word "Unreviewed". 现在,这会显示正确排列的所有内容,但背景颜色不会超出单词“Unreviewed”的结尾。 The image, despite being a transparent png, is white behind, rather than #DA704B. 尽管是透明的png,但是图像是白色的,而不是#DA704B。
This is the case with both Firefox and Safari. Firefox和Safari都是这种情况。 Any help would be appreciated! 任何帮助,将不胜感激!
Spans need to have display: block; 跨度需要显示:块; in order to work like that. 为了像那样工作。
#status {
display: block;
float: right;
position: relative;
cursor: pointer;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
color:#FFFFFF;
font-size: 1.8em;
top: 10px;
}
Well, What jumps out at me is: 嗯,突然发现的是:
#status span.unreviewed
would be the selector for span with class "unreviewed" that is a descendant of #status. 将是带有“未审查”类的span的选择器,它是#status的后代 。 The selector you are looking for is 你正在寻找的选择器是
#status.unreviewed
You might want to have a look at the w3c specifications for CSS2 to avoid selector problems like this. 你可能想看看CSS2的w3c规范,以避免像这样的选择器问题。 http://www.w3.org/TR/CSS2/selector.html http://www.w3.org/TR/CSS2/selector.html
Hope that helps. 希望有所帮助。
edit: one other quick point, why not use background-color
instead of background
as all you're doing is changing the background color? 编辑:另一个快点,为什么不使用background-color
而不是background
因为你所做的只是改变背景颜色?
change: 更改:
#status span.unreviewed {
to span.unreviewed { to span.unreviewed {
that works for me in all browsers. 这适用于所有浏览器。
If it still doesn't work, try making it block-level or use a div, as the colouring doesn't quite work as you'd expect on inline elements 如果它仍然不起作用,尝试使其块级或使用div,因为着色不像内联元素所期望的那样工作
You might also find it worthwhile declaring: 您可能还会发现值得声明:
#status span.unreviewed img {
background-color: transparent;
}
that should at least remove the white default image background. 这应该至少删除白色默认图像背景。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.