如何为背景的特定部分设置颜色？

我目前正在尝试为我的页面背景的特定部分设置背景颜色。这个想法是将页面顶部的大约1/5或1/4作为一种颜色，而整个剩余底部则是一种单独的颜色。我已经考虑使用渐变来完成它，但我不知道如何通过CSS3设置特定的停止部分。如何为背景的特定部分设置颜色？

有关我如何使用CSS3完成此任务的任何想法？

来源

2015-05-19 CloudTwoNJ

使用gradient generator

html, body { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: #fb83fa; 
 
    background: -moz-linear-gradient(top, #fb83fa 25%, #7ceacd 25%, #7ceacd 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#fb83fa), color-stop(25%,#7ceacd), color-stop(100%,#7ceacd)); 
 
    background: -webkit-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: -o-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: -ms-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
    background: linear-gradient(to bottom, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); 
 
}

或者你可以沟梯度和使用伪元素...

html, body { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: #7CEACD; 
 
} 
 

 
body:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 25%; 
 
    background: #fb83fa; 
 
}

来源

2015-05-19 17:59:13 Turnip

我能否使用第一个选项将页面顶部20％处的颜色融合到底部％80中，类似于使用渐变？我试图在梯度发生器中重新创建我的想法，但对于我正在做的事情有点失落。 – CloudTwoNJ

是否这样？ http://www.colorzilla.com/gradient-editor/#fb83fa+25,7ceacd+100;Custom – Turnip

非常多。颜色和位置需要一些切换，但我已经处理了。谢谢！ – CloudTwoNJ

您可以使用单独的div来表示不同的部分，然后使用height：20vh来表示当前视图高度的20％。

.top { 
    background-color: blue; 
    height: 20vh; 
} 

.bottom { 
    background-color: red; 
    height: 80vh; 
}

http://jsfiddle.net/goerfjyf/1/

我也包括一个div容器来保存您的内容因为身体通常不会以同样的方式基本上作用的其余部分。

来源

2015-05-19 17:58:43 UsainBloot

不需要计算停靠点，您可以使用只有2种相同颜色的渐变，并使用background-size来设置其高度。

html,body{ 
    height:100%; 
} 
body{ 
    background:linear-gradient(0deg,#f00,#f00) no-repeat; 
    background-size:100% 25%; 
}

来源

2015-05-19 18:13:14 Shaggy

如何为背景的特定部分设置颜色？

回答

相关问题