Question

如果我想在我的网页顶部的背景中有一个蓝色条（所以身体元素的背景），但我希望它的高度为100px并跨越整个水平背景......有什么办法吗？要做到这一点，而不是使用我想要的颜色（可能是1px宽度）生成100px的背景图像并使其重复x？

基本上，而不是做：

background: url("images/pagestripe.png") repeat-x;

我想这样做：

background: #FFCCFF 100px top left repeat-x;

这会给我一个100px的背景颜色#FFCCFF，它从页面的左上角开始并水平重复。

同样，如果我想要重复y，它会使宽度为100px而不是高度。

定位标记可以代表偏移......

这可能吗？是否有我正在寻找的实际CSS代码？也许我离我不远......

Answer 1

您可以使用linear gradients执行此操作：

body {
    background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
    background-image: -o-linear-gradient(top, blue 100px, transparent 0);
    background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
    background-image: linear-gradient(top, blue 100px, transparent 0);
}

编辑：这只是CSS3。对于CSS2，您可以尝试

body:before {
    content: ' ';
    display: block;
    top: 0;
    position: absolute;
    height: 100px;
    width: 100%;
    background: blue;
}

Answer 2

您可以将该栏设为单独的div并在其上设置负余量。像这样：

<div id="bluebar"></div>
Content goes here...

然后在CSS中：

div#bluebar {
    background: #fcf;  /* that's actually pink, but whatever... */
    height: 100px;
    margin-bottom: -100px;
}

我会给出一个jsFiddle链接，但他们现在显然已经停止维护，所以here's a simple static HTML demo代替了。

Answer 3

是的，可以做到。

您可以使用所需的高度和背景颜色创建单个全宽度元素。

使用CSS定位元素。

div#bluebar {
    background: #acf;
    display: block;
    height:100px;
    width:100%;
    position: absolute;
    top: 0px; /* however far from the top you would like it*/
    left: 0px;
    z-index: 10; /* or some other number that will place it below the appropriate elements */
}

请确保#blubar的父级没有设置position:relative;，否则它将相对于父级而不是文档进行定位。

我是否可以在不制作图像的情况下使颜色背景仅占元素的百分之一？

3 个答案: