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

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

http://jsfiddle.net/yPVJE/

Итак, можем ли мы установить начальную позицию и размер сплошного фона заливки?

Спасибо!

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Здесь демонстрация на JSFiddle.

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

Другим способом для этого было бы добавить псевдоэлемент в элемент div так:

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;
  }
}