Question

我想为同一元素使用背景图像和颜色但即使我使用像this question

这样的CSS，id也不会起作用

Answer 1

你的CSS工作正常，图像和背景颜色都在一个容器内，因为它们是相同的颜色，你实际上看不到箭头。

解决此问题的最佳方法是使用包装头元素的外部div，如下所示：

<div class="outer"><h1></h1></div>

然后使用适当的CSS样式：

div {
   float: right;
   width: 198px;
   background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);        
   background-position: 0px;
   background-repeat: no-repeat;
   margin-top:21px;
}

h1{
    color:white;
    font-size: 170%;
    font-weight: normal;
    font-family: arial;
    width:189px;
    height:33px;
    line-height: 33px;
    background-color: #b21f23;
    float:right;
}

因此，为了澄清，外部div稍大，包含左侧对齐的背景图像，然后标题用背景颜色填充所有剩余空间。

Answer 2

我认为只用一种元素样式就不能得到你想要的结果。

您需要在元素之外使用background-image，这是不可能的。

或者您需要background-color来填充所有元素，这也是不可能的

IMO的最佳选择是在第一个中有两个元素background-image，第二个中有background-color

http://jsfiddle.net/xdkwB/11/

带文字的示例：

http://jsfiddle.net/xdkwB/13/

右浮动示例：

http://jsfiddle.net/xdkwB/14/

Answer 3

试试这个

background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;

这将添加背景图像，其他一切将是您的背景颜色

Answer 4

您已将背景颜色设置为与图像相同的颜色。所以它就在那里，你只是看不到它，因为它融合在一起。

Answer 5

你的箭头与te背景颜色相同。您可以使用background-position定位背景，并使用负左值将其置于框外：

使用相同元素的背景图像和颜色

5 个答案: