我们如何使用线性渐变创建设计背景？

我有以下设计，我想在单div标签上使用单背景css属性来管理它。我们如何使用线性渐变创建设计背景？

enter image description here

我添加以下代码，使背景，因为它的形象，但我不能管理它的页脚。 HTML

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

CSS

.main-container{ 
linear-gradient(to right, #86aec1 0%, #86aec1 3.6%, #afafaf 3.6%, #afafaf 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
height: 100%; 
margin: 0 auto; 
width: 73.9%; 
}

使用上面的代码显示只剩下蓝色的部分和右侧灰色部分，但我无法得到任何其他的选择，我可以在一个DIV创建页脚部分。

来源

2014-07-26 vin

你在寻找类似[这里]（http://jsfiddle.net/Tm2rF/1/ ）？不确定，因此不添加为anwer。 – Harry

是的，你是伟大的，但我尝试相同，但我想要完全相同的设计。您可以在底部看到蓝色背景之间有灰色空间。那件事很难设计。 :( – vin

的确，我们必须使用box-shaow（插入）和线性渐变的组合，并且灰色区域在小提琴中。 – Harry

您可以使用box-shadow和linear-gradient的混合来实现此目的。请参阅内嵌评论以了解更多详情。

.main-container { 
 
    background: -webkit-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); /* this produces the thin line above the bottom */ 
 
    background: -moz-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); 
 
    background: linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); 
 
    /* Just play around with the percentages and increase them to get a thicker line */ 
 
    height: 300px; 
 
    margin: 0 auto; 
 
    width: 73.9%; 
 
    box-shadow: inset 25px -25px #86aec1; /* this produces the thick left and bottom border */ 
 
    border: 1px solid black; 
 
}

<div class="main-container">&nbsp;</div>

来源

2014-07-26 06:47:57 Harry

你太棒了。感谢您的杰出答案。 – vin

您可以使用多个背景。在下面的例子中，两个线性渐变和纯色背景时：

.main-container { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    height: 300px; 
 
    background: 
 
    linear-gradient(to right, 
 
     rgba(133, 173, 192, 1) 0, rgba(133, 173, 192, 1) 20px, 
 
     rgba(133, 173, 192, 0) 20px 
 
    ), 
 
    linear-gradient(to top, 
 
     rgba(133, 173, 192, 1) 0, rgba(133, 173, 192, 1) 20px, 
 
     rgba(133, 173, 192, 0) 20px, rgba(133, 173, 192, 0) 25px, 
 
     rgba(133, 173, 192, 1) 25px, rgba(133, 173, 192, 1) 30px, 
 
     rgba(133, 173, 192, 0) 30px 
 
    ), 
 
    #AFAFAF; 
 
}

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

来源

2015-02-04 09:10:09

我们如何使用线性渐变创建设计背景？

回答

相关问题