фоновая позиция для фона цвет

Im способна дать исходное положение фонового изображения. Но если я даю позиции для сплошного фона заполнения, он не работает. Вот для этого скрипка js.фоновая позиция для фона цвет

http://jsfiddle.net/yPVJE/

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

Спасибо!

источник

2011-12-19 rajkamal

Я пытаюсь получить этот эффект http://jsfiddle.net/H48ua/, без внутреннего div «.bg», переведя «.bg» в раздел «.cover» – rajkamal

Вы не можете компенсировать цвет фона. Позиция имеет только фоновые изображения.

источник

2011-12-19 07:56:51 Scott

Это один из способов, чтобы компенсировать сплошной цвет фона, с использованием линейного градиента с прозрачным цветом для первого й количества пикселей:

.offset { 
    background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%); 
    width: 100%; 
    height: 500px; 
}

Вот a demo на JSFiddle.

источник

2012-07-26 16:15:33 StuR

Я пошел к демо на JSFiddle и увидел в результате ничто, даже если я нажимаю бег. Я ожидал, что цвет фона clr div немного компенсируется, но ничего не показал. Есть ли ошибка в скрипте? Что бы это ни стоило, я попытался добавить CSS из ответа Эша и не увидел ничего. Я даже попытался добавить это к оригиналу. –

@SarahWeinberger - снова попробуйте ссылку JSFiddle, я добавил браузерные префиксы в CSS. – StuR

Спасибо, обновленный код работал. Примечание для других: внутренний дизайн Visual Studio 2013 не отображает градиент/цвет. Вы должны запустить пример в реальном браузере, чтобы увидеть результат. Я попал в эту ловушку и попытался выяснить разницу между Fiddler и моим браузером (VS2013 Design View) и понял, что VS не является истинным браузером и имеет ограничения. –

Я бы применил аналогичный подход к StuR, но использовал фоновые позиции вместо градиентных точек. Затем вы можете установить фоновое положение, как обычно.

div { 
    background:linear-gradient(left, #000, #000) no-repeat 50px 50px; 
}

источник

2012-10-24 19:17:08 Ash

Обратите внимание, что это не работает с процентными значениями, например, 50% – jsheffers

. Примечание. IE9 not & opera mini не поддерживает линейный градиент. – Flion

Это изображение больше пикселей.С линейным градиентом я получил некоторые «размытые» строки в некоторых браузерах, когда элемент был слишком большим. – hesselbom

Да, с линейным градиентом он работает:

div { background-image: linear-gradient(transparent 10px, grey 10px); }

источник

2014-05-26 13:43:25 user3223452

Следите за неправильное выравнивание, когда используется linear-gradient точки. Вот лучший подход:

background: linear-gradient(#6699cc, #6699cc); 
background-size: auto 4em; 
background-repeat: no-repeat;

Он использует linear-gradientтолько для создания сплошного цвета, который затем изменяет размер, чтобы отразить крытую размер области. Также background-position может использоваться по мере необходимости

источник

2018-01-03 11:53:53 thodnev

Другим способа для достижения этой цели была бы добавить псевдо-элемент к элементу сНа следующим образом:

div { 
 
    ::before { 
 
    border-top: 10px solid #0066a4; 
 
    content:""; 
 
    margin: 0 auto; /* this centers the line to the full width specified */ 
 
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ 
 
    top: 12px; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    } 
 
}

Смотрите эту CodePen Эрик Раша для рабочего примера: https://codepen.io/ericrasch/pen/Irlpm

источник

2018-01-23 02:44:12

фоновая позиция для фона цвет

ответ

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