在这里,我很可能会要求一根棍子上的月亮,但是:我正在尝试弄清楚如何获得双色背景来描绘主要内容的两列。
背景必须是完整的视口(viewport)宽度(边到边),并且中心内容是响应式的,max-width
为 960px,分为两列;第一列是宽度的 2/3(最大 640px 宽),第二列占据剩余的 1/3(最大 320px 宽)。解释它的最简单方法可能是使用 GIF:
如您所见,浅蓝色“侧边栏”背景颜色的左侧部分始终与实际侧边栏列的左侧对齐。有人向我指出 checkout on woothemes.com几乎具有完全相同的效果(尽管我认为您需要在购物篮中添加一些东西才能看到它)。他们似乎是通过 linear-gradient
实现的,归结为:
background: linear-gradient(90deg,#fff 53.5%,#f0f4f5 46.5%);
background: -moz-linear-gradient(left,#fff 52%,#f0f4f5 46.5%);
问题是:
- 我根本不理解这些声明 - 为什么第二个色标的值比第一个低(为什么
-moz
声明的第一个色标的百分比不同)?调整它似乎没有什么区别,但我确实需要更新这些值,因为它们不符合我的需要...但我不明白。 - 虽然效果接近,但不幸的是它并不完美:首先,两种颜色之间的停止有点模糊;更糟糕的是,重新缩放时线条会“漂移”。虽然只是一点点,但不幸的是,这足以消除我得到的设计的幻觉。
我尝试了几种方法,包括 linear-gradient
的变体和基于百分比和 calc()
的偏移量的伪元素,但我'我完全不明白。我一直在争论这是否是我可以通过一些 super 聪明的 SVG 元素处理来实现的,但我似乎完全被困在看起来看似简单的东西上。
有没有办法用纯 CSS 实现这个?
最佳答案
我没有查看 woothemes.com 示例,但这是我的看法:
http://jsbin.com/jofeseseyo/edit?css,output
这需要根据网站的其余部分进行一些调整,但想法是:一个最大 960 像素的容器,有两个 child (66.666% 和 33.333% 宽度)。每个 child 都有一个伪元素,它绝对定位在两列相交的地方。然后它们在所有内容后面进行 z 索引。
我不知道您网站的其余部分看起来如何,所以我让其余部分有点随意。背景色列具有固定高度,现在为 200vh。
关于css - 全宽正文背景以匹配响应式列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37944356/