背景颜色的背景位置

Question

我能够提供背景图像的起始位置。但是，如果我为纯色填充背景提供位置，它不起作用。这是js fiddle的链接。

http://jsfiddle.net/yPVJE/

那么我们可以设置实心填充背景的起始位置和大小吗？

谢谢！

- Rajkamal Subramanian

---

我正在尝试通过将“ .bg”传递到“.cover” div，来获得类似于此效果的效果http://jsfiddle.net/H48ua/，但不包括内部div“ .bg”。 - Rajkamal Subramanian

Answer 1

我会采用与StuR类似的方法，但使用背景位置而不是渐变点。然后您可以像通常设置背景位置一样进行操作。

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

- Ash

---

请注意，此功能无法处理百分数值，例如50%。 - jsheffers

注意，IE9和Opera Mini不支持linear-gradient。 - Flion

这看起来更加像素完美了。只使用线性渐变时，在某些浏览器中，当元素太大时会出现一些“模糊”的线条。 - hesselbom

有些浏览器要求使用新的语法to left代替left。如果不加 -webkit 前缀，我的Chrome（79）会抛出错误。请注意，翻译时保持原文意思不变，让内容更通俗易懂。 - sofly

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上的演示。

- StuR

---

我去了JSFiddle的演示，结果什么也没有看到，即使我点击运行。我本来期望clr div背景颜色会稍微偏移一点，但是完全没有显示出来。脚本里有错误吗？不管怎样，我尝试添加了Ash答案中的CSS，但还是什么也没有看到。我甚至尝试将其添加到原始代码中。 - Sarah Weinberger

@SarahWeinberger - 请再次尝试JSFiddle链接，我已经为CSS添加了浏览器前缀。 - StuR

谢谢，更新后的代码可用。提醒其他人：Visual Studio 2013内部设计视图不显示渐变/颜色。您必须在真正的浏览器中运行示例才能看到结果。我曾经陷入这个陷阱，试图找出Fiddler和我的浏览器（VS2013设计视图）之间的区别，并意识到VS不是真正的浏览器，有其局限性。 - Sarah Weinberger

投票支持这个是因为它允许使用百分比而不仅仅是像素值。 - jsheffers

Answer 3

你无法对背景色进行偏移。只有背景图像才有位置。

- Scott

---

嗯，每件事都有解决办法。 - Dee

Answer 4

如果你可以创建一个具有背景颜色、高度和宽度的 ::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;
}

- eon

---

这应该是被接受的答案，使用它可以间接地偏移背景颜色。 - po10cySA

我认为这种方法是最好的。如果 :before 伪元素需要在 myElement 的内容后面，确保将 position: relevant 指定给 myElement。 - Wtower

Answer 5

使用 linear-gradient 时，请注意不要出现不正确的对齐。

以下是更好的做法:

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

它使用linear-gradient仅用于生成纯色，然后调整大小以反映覆盖区域的大小。

此外，如有需要，也可以使用background-position，例如：

background: linear-gradient(#6699cc, #6699cc);
background-size: calc(100% - 30px) auto;
background-repeat: no-repeat;
background-position: right;

在上一个例子中，背景颜色将从 div 左侧开始 30px 处 "启动"。

更多阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

- thodnev

---

我选择了这种方法来检测输入字段的密码强度。在keyup事件中，设置style.backgroundSize = percentStrength + "% 100%"; 其他方法似乎对我无效。 - Jason Silver

在我看来，最佳方法是... - Ignacio Bustos

Answer 6

是的，使用线性渐变可以实现：

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

- user3223452

---

linear-gradient(to right, blue 10px, transparent 10px) 表示水平方向的渐变。 - Aidin

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>

- vsync

---

我已经寻找这个解决方案大约2个小时了！您先生/女士让我感到非常开心 :) - Josh Clark

Answer 8

另一种实现方式是向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

- 1FlyCat

Answer 9

您可以通过将父元素和子元素的position: relative;来实现此目的。接下来，您只需设置偏移量即可。还有其他几种方法可以实现这一点，但这是其中的一种方法。

SCSS：

HTML：

示例：

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

- Adit - COCO