背景颜色的背景位置

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上的a demo。

Answer 3

您无法偏移背景颜色。只有背景图像才有位置。

Answer 4

是的，线性渐变有效：

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

Answer 5

在使用background: linear-gradient(#6699cc, #6699cc); background-size: auto 4em; background-repeat: no-repeat; 点时注意不正确的对齐方式。 这是一个更好的方法：

linear-gradient

它使用background-position 只生成纯色，然后调整大小以反映覆盖区域大小。也可以根据需要使用const client: Client = new Resource({ token: 'xyz' }); client.events.create({ id: userId, event: eventName, created: formatDate(date) }, doSomething(cb));

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

请参阅Eric Rasch的CodePen作为一个工作示例：https://codepen.io/ericrasch/pen/Irlpm

Answer 7

您可以使用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>

Answer 8

如果您可以使用颜色，高度和宽度bg来创建:: before伪元素，并将其与父元素偏移，则可以完全控制其外观。比在伪元素中添加边框要容易得多：

/* 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 9

您可以通过具有父元素和子元素position: relative;来实现。接下来，您可以进入并设置偏移量。还有其他几种方法可以实现这一目标，但这是众多方法之一。

SCSS：

HTML：

示例：

请注意，这可能会对按钮和链接产生副作用。针对您的用例进行测试。祝好运！ 快乐编码