Как сместить background?

Question

[RimMirK]

Пишу стиль для цитаты (<blockquote>)
Получается вот-так
хочется чтобы фон был смещен в право на 0.5em

blockquote {
    padding: 0.5em;
    padding-left: 1.5em;
    margin: 0;
    border-left: 4px solid #000;
    font-style: italic;
    margin-left: 0.8em;
    background-color: rgba(225,225,225,0.5);
    background-position: right;
}

Comments

[Вадим]

фон чего? У Вас задана сплошная заливка цветом. Что Вы собрались смещать?

[RimMirK]

Вадим, весь цвет вправо. по-типу

position: relative;
left: 0.5em;

только для фона

[SHKD]

Используйте псевдокласс :before :after

[Ankhena]

Можете заменить заливку на градиент.

Альтернатива: убираете границу, делаете её с помощью псевдоэлемента, регулируете отступы.

Answer 1

[RimMirK]

Сделал через градиент. Вышло даже лучше

CSS

blockquote { 
	padding: 0.5em; 
	padding-left: 1.5em; 
	margin: 0;
	border-left: 4px solid #000; 
	font-style: italic; 
	display: block;
	margin-left: 0.8em; 
	background: linear-gradient(to right, transparent, rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.8), rgba(225,225,225,0.9), rgba(225,225,225,1) );
}

Comments

[Сергей delphinpro]

Для четкой границы добавьте
background: linear-gradient(to right, transparent 20px, rgba(225,225,225,0.7) 20px, rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7), rgba(225,225,225,0.7),

[Ankhena]

Да, я, конечно, имела в виду четкую границу

Answer 2

[Sadix Blaren]

Background нельзя переместить за пределы элемента для которого он назначен. Можно позиционировать его при помощи свойства background-position: (далее через пробел расстояние слева от края и потом сверху).
В вашем же случае будет

blockquote {
    padding: 0.5em;
    padding-left: 1.5em;
    margin: 0;
    border-left: 4px solid #000;
    font-style: italic;
    margin-left: 0.8em;
    background-color: rgba(225,225,225,0.5);
    background-position: 0.5em 0;
}

Comments

[Ankhena]

Можно, пожалуйста, действующий пример как вы с помощью bg position двигаете фон заданный через bg color?