跨页面实现条带

Question

我正在尝试实现以下设计：

我遇到了遍布页面的红色条纹问题，我不知道如何实现它......

我使用的是背景图片，标题中有一个，右侧边栏中有一个。问题是我不知道如何制作它以使条纹相互连接。

我尝试了什么：

.header {
   background-image: url('../images/header-background-2.png');
   background-repeat: no-repeat;
   background-position: center bottom;
   -moz-background-size: cover; 
   -webkit-background-size: cover; 
   background-size: cover;
}

.sidebar {
   display: block;
   background-image: url('../images/sidebar-tile.png');
   background-repeat: repeat;
   background-position: center;
   -moz-background-size: contain; 
   -webkit-background-size: contain; 
   background-size: contain;
}

但它不起作用..您可以看到结果here

知道如何实现这个吗？

Answer 1

我意识到在流畅的布局上实现这个设计太难了。所以这就是我所做的： 宽度＆lt; 1030，我实现了另一种布局，而不是在这个问题的范围内。

对于大于1030像素的屏幕宽度，我在内容上设置了最大宽度。我现在有一个固定宽度的布局，可以更容易地实现红色条纹。

这是我的代码：

.wrap { max-width: 1030px;}

并在我的内部标题，内部内容和内部页脚上应用wrap类。

然后：

#inner-header {
  background-image: url('../images/header-background-1030-3.png');
  background-repeat: no-repeat;
  background-position: center bottom;
}

#inner-content {
  background-image: url('../images/sidebar-background-1030-tile-2.png');
  background-repeat: repeat-y;
  background-position: center top;
}

#inner-footer {
  background-image: url('../images/sidebar-background-1030-tile-2.png');
  background-repeat: repeat-y;
  background-position: center top;
}

请注意，我的背景图片的宽度均为1030像素。 没有调整大小的问题，布局很好地保留了。

Answer 2

尝试通过在该颜色中制作1x1像素来创建该图像，即。，rgb（194,39,45）。然后，您可以将此图像和CSS用于背景的（直线部分）（即，未放置曲线的位置）。你也可以通过创建div和边界半径（半径？）来完全使用CSS。使用CSS重复的1x1像素对于背景图像更好bc在任何设备上看起来都相同。

Answer 3

也许我不理解您的问题，但是如果您希望网站在各种设备和窗口大小中可读;你为什么不使用div和样式规则？

Answer 4

首先让红色部分分为左上角的第一条曲线，菜单，最后是红色条的最后一条曲线/其余部分。在on div中，使用photoshop或任何其他照片编辑器将第一条曲线创建为图像。然后在下一个div中创建菜单栏，具有相同的红色背景。最后做与第一条曲线到最后一部分相同的事情。使用照片编辑器将其绘制为jpeg并将其放入div中。使用css样式来定位div。