CSS背景职位

时间:2013-07-07 18:19:25

标签: html css blogger

在尝试为我的博客完成布局时,我遇到了一个似乎无法解决的问题。我有两个不同的背景,我想用于我的博客。其中一个背景仅用于博客的标题。我要添加的其他背景是其余的。我一直试图找到一种方法来让我的身体背景在这么多间距之后重复运气。

如果有一种方法可以在一个完美的位置之后重复背景。但是我的搜索似乎无法做到这一点。如果还有另一种方法可以实现这一目标,那将非常有帮助。

This is the site我正在尝试编辑。

正如您所看到的,标题具有适当的背景,但我无法想办法在其他地方获得该背景。为了澄清,背景标题在主页/搜索按钮下面有一个蓝色背景,这就是为什么我不能只有一个重复的标题。

我刚刚对我的网站进行了一些编辑,我开始非常接近我的想法。我做了一个“足够好”的快速修复。我只是重复了标题背景,它在大多数情况下看起来很不错。它现在唯一的问题是作为标题一部分的蓝色条有时会出现在屏幕的底部,这是可以的。如果有人有更好的解决方案,我很乐意听到。

1 个答案:

答案 0 :(得分:1)

当你指定“repeat-y”时,就我所知,在某些坐标后背景开始重复时,没有可能性。

但是,由于你有2个不同的背景,你不需要。

首先指定非重复背景,并使用足够的尺寸;它会隐藏另一个

这个CSS

.test1 {
    background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
    background-position: 0px 0px, 0px 0px;
    background-size: 100% 100px, 100% 50px;
    background-repeat: no-repeat, repeat-y;    
}

产生黑色&红色顶部,然后是重复的黄色条纹图案

demo

从你的例子中不清楚这是否足够;如果不是,你需要在第一个和第二个之间的另一个背景,以隐藏所需的重复背景的数量