CSS:双色背景

Question

这可能不是最好的标题,但我很难找到合适的标题.基本上,我需要的是有一个双色背景图像,断点设置到一个特定的位置.

这就是我现在所拥有的:

哪个可以在这个jsfiddle中测试.

这就是我想要实现的目标:

但有一件事是,这个栏中的斜面需要与徽标对齐,如下所示:

如果没有倾斜,这可能会更容易,但我还没有找到实现所需行为的方法.我尝试做的是创建一个具有背景颜色的div,并在该div内部,第二个将放置在包含图像的顶部.

<div class="line-container">
      <div class="line">                
      </div>
</div>

.line-container{
  width: 100%;
  background-repeat: repeat-x;
  background-color: #009b3a;
}
.line{
  background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
  display: block;
  width: 50m;
  margin: 0 auto;
  height: 10px;
}

但是侧面的位置和颜色是错误的,如这个jsfiddle所示:

有什么建议吗？

Answer 1

看起来像是渐变的工作.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg,  #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

只需将其添加到您的css类并相应地更改颜色.