2

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

网站样机

我在页面上出现红色条纹时遇到问题，我不知道如何实现它..

我虽然使用背景图像，一个在标题中，一个在右侧边栏中。问题是我不知道如何使条纹相互连接。

我尝试了什么：

.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;
}

但它不起作用..你可以在这里看到结果

知道如何实现吗？

4

4 回答 4

0

我意识到在流畅的布局上实现这种设计太难了。所以这就是我所做的：在宽度 < 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 像素。不再有调整大小的问题，布局保持良好。

于 2013-06-08T02:30:42.487 回答
0

尝试通过在该颜色中创建一个 1x1 像素来创建该图像，即 rgb(194,39,45)。然后，您可以将此图像和 CSS 用于背景的（直线部分）（即未放置曲线的位置）。您还可以通过创建 div 和边框半径（半径？）来完全使用 CSS。使用 CSS 重复的 1x1 像素更适合背景图像，因为它在任何设备上看起来都一样。

于 2013-06-09T22:54:00.893 回答
0

也许我不明白您的问题，但是如果您希望网站在各种设备和窗口大小下都可以阅读；为什么不使用 div 和样式规则？

于 2013-06-10T05:14:52.037 回答
-1

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

于 2013-06-07T16:33:19.977 回答