CSS 背景颜色的背景位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8558502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
background position for background color
提问by Rajkamal Subramanian
Im able to give the start position of an background image. But if i give positions for solid fill background its not working. Here is the js fiddle for that.
我能够给出背景图像的起始位置。但是，如果我为纯填充背景提供位置，则它不起作用。这是 js 小提琴。
So can we set the start position and the size of an solid fill backgrounds?
那么我们可以设置纯色填充背景的起始位置和大小吗？
Thanks!
谢谢！
采纳答案by Scott
You can not offset a background color. Only background images have a position.
您不能偏移背景颜色。只有背景图像有位置。
回答by Ash
I would take a similar approach to StuR, but using background position instead of gradient points. You can then set your background position as you would usually.
我会对 StuR 采取类似的方法，但使用背景位置而不是渐变点。然后，您可以像往常一样设置背景位置。
div {
background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}
回答by StuR
This is one way to offset a solid background color, using a linear gradient with a transparent colour for the first x number of pixels:
这是偏移纯背景色的一种方法，对第一个 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;
}
Here's a demoon JSFiddle.
回答by user3223452
Yes, with linear-gradient it works:
是的，使用线性梯度它可以工作：
div { background-image: linear-gradient(transparent 10px, grey 10px); }
回答by thodnev
Watch out for improper alignment when linear-gradientpoints are used.
Here's a better approach:
linear-gradient使用点时注意对齐不当。这是一个更好的方法：
background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;
It uses linear-gradientjustto generate solid color, which is then resized to reflect the covered area size. Also background-positioncould be used as needed
它linear-gradient仅用于生成纯色，然后调整其大小以反映覆盖区域的大小。也background-position可以根据需要使用
回答by Mister Wonderful
Another way to accomplish this would be to add a pseudo-element to the div element like so:
实现此目的的另一种方法是向 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;
}
}See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm
有关工作示例，请参阅 Eric Rasch 的 CodePen：https://codepen.io/ericrasch/pen/Irlpm
回答by vsync
You can use background-sizeinstead of background-positionto restrict the colored area:
您可以使用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>回答by eon
If you can make a ::before pseudo element with bg color, height and width and just offset it from its parent, you'll have complete control of its appearance. Much easier than putting a border in the pseudo element:
如果您可以使用 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;
}
