背景颜色的背景位置

我能够给出背景图像的开始位置。但是，如果我给固体填充背景职位，它不工作。这是js小提琴。背景颜色的背景位置

http://jsfiddle.net/yPVJE/

所以我们可以设置起始位置和实体填充背景的大小？

谢谢！

来源

2011-12-19 rajkamal

我试图得到这个效果http://jsfiddle.net/H48ua/，没有内部div“.bg”通过转移“.bg”到“.cover”div – rajkamal 2011-12-19 08:05:34

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

来源

2011-12-19 07:56:51 Scott

这是为了抵消固体背景颜色，采用线性梯度用透明颜色像素的第一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; 
}

这里的a demo上的jsfiddle。

来源

2012-07-26 16:15:33 StuR

我参加了JSFiddle的演示，结果发现没有什么，即使我推动运行。我期待clr div的背景颜色刚好抵消一点，但没有任何表现。脚本中是否有错误？无论什么是值得的，我试着从Ash的回答中添加CSS，并且看到了什么也没有。我甚至尝试将其添加到原始的一个。 – 2014-06-23 22:51:34

@SarahWeinberger - 再次尝试JSFiddle链接，我已将浏览器前缀添加到CSS。 – StuR 2014-06-24 09:09:49

谢谢，更新的代码工作。其他人注意：Visual Studio 2013内部设计视图不显示渐变/颜色。您必须在真实浏览器中运行该示例才能看到结果。我陷入了这个陷阱，试图找出Fiddler和我的浏览器（VS2013设计视图）之间的区别，并意识到VS不是真正的浏览器，并有其局限性。 – 2014-06-24 15:58:13

我会采取类似的方法来StuR，但使用背景位置，而不是梯度点。然后，您可以像平常一样设置背景位置。

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

来源

2012-10-24 19:17:08 Ash

请注意，这不适用于百分比值，如50％ – jsheffers 2015-02-02 21:27:04

请注意，IE9 not＆opera mini不支持线性渐变 – Flion 2015-12-04 16:42:34

这看起来更像素完美。只有线性渐变，当元素太大时，我在某些浏览器中会看到一些“模糊”的线条。 – hesselbom 2016-01-14 09:01:24

是的，线性渐变它的工作原理：

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

来源

2014-05-26 13:43:25 user3223452

当心不适当的对准当使用linear-gradient点。这里有一个更好的方法：

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

它采用linear-gradient只是产生纯色，然后调整，以反映覆盖区域的大小。此外background-position可以根据需要使用

来源

2018-01-03 11:53:53 thodnev

另一种方式来实现，这将是一个伪元素添加到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

来源

2018-01-23 02:44:12

背景颜色的背景位置

回答

相关问题