Question

大家好我正在为我的大学项目建立一个网站，我不擅长使用Dreamweaver CS6。我在photoshop中制作了我的设计，我正努力在我的网站中使用渐变背景。我已经尝试了几次让它工作，但它要么重复很多次，要么填满一定数量的页面，但切断了。任何帮助将不胜感激，提前谢谢。

这是CSS代码

html body
{
background: linear-gradient(to top, #48E7A2 0%, #86C4ED 100%);
background-size:cover;

}

Answer 1

您可以复制此代码。来自http://www.colorzilla.com/gradient-editor/

您应该在html{}上body{}上使用它并添加height:100%;

html {    
    height: 100%;
    background: #48e7a2; /* Old browsers */
    background: -moz-linear-gradient(top,  #48e7a2 0%, #86c4ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48e7a2), color-stop(100%,#86c4ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #48e7a2 0%,#86c4ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #48e7a2 0%,#86c4ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #48e7a2 0%,#86c4ed 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #48e7a2 0%,#86c4ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48e7a2', endColorstr='#86c4ed',GradientType=0 ); /* IE6-9 */
}

<强> DEMO

渐变背景

1 个答案: