Цвет фона с позиции

Мне нужно начать фоновый цвет с определенной позиции и не применять весь элемент.Цвет фона с позиции

HTML

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here text heretext here text here</p>

CSS

p.tax-free-keksis { 
background-image: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png); 
background-position: left center; 
background-repeat: no-repeat; 
background-color: #c2e8fb; 
padding-top: 15px; 
padding-left: 50px; 
padding-right: 10px; 
text-align: left; 
}

ссылка jsfiddle: http://jsfiddle.net/MVST6/

мне нужен цвет фона: # c2e8fb начать около 50px слева (так что обратная сторона галочки - белый, а не синий).

Я думаю, что я не могу поместить фоновый цвет в какой-то «обычный» способ. Здесь мне нужно некоторое исправление, о котором я не знаю, поскольку я не разработчик CSS, и я новичок в разработке веб-страницы.

источник

2013-06-09 renathy

Я думаю, CSS псевдо-селекторы ': before' и': after' будет способствовать достижению этой цели, проверить EM вне. – Dom

Это не возможно с цветом фона, но возможно с a gradient background image:

background-image: 
    linear-gradient(to right, transparent 50px, #c2e8fb 50px), 
    url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);

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

источник

2013-06-09 14:26:34 Pavlo

Вы не можете сделать это таким образом. Может быть, попробовать что-то вроде этого:

HTML

<p class="tax-free-keksis"> 
    <img src="http://tax.allfaces.lv/templates/tax/images/poga_keksis.png"> 
     text here text here text here text here text here text here text here text here text here text here text here text heretext here text hered 
    </p>

CSS

p.tax-free-keksis { 
    background-repeat: no-repeat; 
    background-color: #c2e8fb; 
    padding-top: 15px; 
    margin-left: 50px; 
    padding-right: 10px; 
    text-align: left; 
} 
p.tax-free-keksis img { 
    position: relative; 
    float: left; 
    left: -50px; 
    top: -25px; 
}

источник

2013-06-09 14:18:16

Вы можете использовать этот код:

position: fixed; 
top: 0; 
left: -120px; 
width: 50%; 
height: 100%; 
border-right:1px solid #d0d0d0; 
background-color: red; (if you want you can put image here) 
z-index: -10;

этот код для изображения. Затем вы должны придать стилю текст и дать ему дополнение.

источник

2013-06-09 14:18:40 tcgumus

Я не понимаю вашего ответа. – renathy

Вот еще один вариант:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

p.tax-free-keksis { 
    position: relative; 
    background-color: #c2e8fb; 
    padding-top: 15px; 
    margin-left: 50px; 
    padding-right: 10px; 
    text-align: left; 
} 

.tax-free-keksis:before { 
    content: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png); 
    position: absolute; 
    left: -50px; 
    top: 0; 
} 

</style> 
</head> 
<body> 

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here text heretext here text here 
    </p> 

</body> 
</html>

источник

2013-06-09 14:30:04

Цвет фона с позиции

ответ

Смежные вопросы