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

Question

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

http://jsfiddle.net/yPVJE/

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

Спасибо!

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 7

Если вы можете создать псевдоэлемент :: before с цветом, высотой и шириной bg и просто сместить его от своего родителя, вы получите полный контроль над его внешним видом.Гораздо проще, чем поместить границу в псевдоэлемент:

/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */

.myElement::before {
  background-color: #fff;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 43px;
  right: 0;
  width: 300px;
  height: 201px;
  z-index: -1;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

Answer 8

Вы можете использовать background-size вместо background-position для ограничения цветной области:

// randomly set background size every 1 second

var elm = document.querySelector('div');
window.setInterval(()=> {
  var randomValue = Math.random()*100;
  elm.style.backgroundSize = randomValue + '%';
}, 1000)

div {
   height: 100px;
   border: 1px solid black;
   transition: .4s ease-out;
   
   background: linear-gradient(to right, black, black) no-repeat;
   background-size: 0;  /* <--- starting from 0% */
 }

<div></div>