试图在"分为两部分"的页面上获得背景; 两侧有两种颜色(看似通过background-color在body标签上设置默认值,然后将另一种颜色应用于div拉伸窗口的整个宽度).
我确实提出了一个解决方案,但遗憾的是该background-size属性在IE7/8中不起作用,这是该项目必须的 -
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
既然它只是纯色可能有一种方法只使用常规background-color属性?
我有这样的设计:
它已经使用 html/css 创建,但我需要删除 1 和 5 的额外线条。这是通过添加位置绝对元素来创建灰线来实现的,但容器点的大小是响应式的。
我的想法是为每个容器创建一个背景线性渐变,如下所示:
对全部:
background: linear-gradient(to right, grey 100%, transparent 0);
Run Code Online (Sandbox Code Playgroud)
对于第一个:
background: linear-gradient(to left, grey 50%, transparent 0);
Run Code Online (Sandbox Code Playgroud)
对于最后一个:
background: linear-gradient(to right, grey 50%, transparent 0);
Run Code Online (Sandbox Code Playgroud)
但我不知道如何让它变小: