Используйте фоновое изображение и цвет для того же элемента

Question

Я хочу использовать фоновое изображение и цвет для того же элемента но ид doens't работы даже я использую CSS, как this question

вот мой 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 немного больше и содержит фоновое изображение, выровненное влево, а затем заголовок заполняет все оставшееся пространство цветом фона.

Answer 2

попробовать этот

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

это добавит фоновое изображение и все остальное будет ваш цвет фона

Answer 3

Вы установили цвет фона того же цвета, что и изображение. Так оно и есть, вы просто не можете его увидеть, потому что он вписывается.

Answer 4

Вы стрелка того же цвета, что и фон te. Вы можете позиционировать фон с помощью background-position, а с отрицательным левым значением оно выходит за рамки:

Answer 5

Я не думаю, что вы можете получить желаемый результат только с одним стилем элемента.

Вы должны либо иметь background-image вне элемента, что невозможно.

Или вам нужно бы background-color, чтобы не заполнить все элемента, который также не представляется возможным

---

Лучший вариант ИМО, будет иметь два элемента с background-image в первом, и background-color во втором

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

Пример с текстом:

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

Пример плавал право:

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