0

嗨，我有这样的代码：

body {  

background: rgb(59,103,158);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNiNjc5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMmI4OGQ5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(125,185,232,1) 0%, rgba(43,136,217,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(0%,rgba(125,185,232,1)), color-stop(99%,rgba(43,136,217,1))); 
background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(125,185,232,1) 0%,rgba(43,136,217,1) 99%);
background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(125,185,232,1) 0%,rgba(43,136,217,1) 99%); 
background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(125,185,232,1) 0%,rgba(43,136,217,1) 99%);
background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(125,185,232,1) 0%,rgba(43,136,217,1) 99%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#2b88d9',GradientType=0 );

}

我是直接从 ColorZilla 那里得到的，但它会自我重复很多次。我希望它成为网页的背景。有什么建议么？谢谢！

4

3 回答 3

0

似乎您想防止背景重复。为此，添加

body { background-repeat: no-repeat; }
于 2012-11-20T17:48:50.953 回答
0

尝试设置背景大小：

BODY {
    -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
         -o-background-size: 100% 100%;
            background-size: 100% 100%;
}

（当然会应用于常规背景，而不是 IE 的过滤器。）

于 2012-11-20T17:56:13.393 回答
0

如果您确实希望减少所需的编码量（如某些人所建议的那样），我仍然会坚持使用带有 repeat-x 的 1px 宽度的图像。

更少的编码，跨浏览器兼容，而且我没有看到一张图像在渲染时间上有如此巨大的差异。

background: url('path_here/bg.jpg') repeat-x;
于 2012-11-20T18:52:00.873 回答