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

Question

我想使用相同元素的背景图像和颜色,但即使我使用像这个问题的CSS,id也不起作用

这是我的CSS http://jsfiddle.net/xdkwB/

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稍大,包含左侧对齐的背景图像,然后标题用背景颜色填充所有剩余空间.