背景颜色的背景位置

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

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

是的，它具有线性渐变功能：

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

Answer 6

linear-gradient使用点时注意对齐不当。这是一个更好的方法：

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

它linear-gradient 仅用于生成纯色，然后调整其大小以反映覆盖区域的大小。也background-position可以根据需要使用