我使用CSS3渐变,在本地系统中正确加载。一旦我们上传了该文件,它就像带有渐变的条纹块一样显示。
CSS:
body {
zoom: 1;
opacity: 1;
display:block;
color: #333;
font-size: 12px;
height: 100%;
min-height:100%;
background-size: 100% /*Cover */;
background: #e5dada;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZGFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #e5dada 0%, #ffffff 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5dada), color-stop(99%, #ffffff));
background: -webkit-linear-gradient(top, #e5dada 0%, #ffffff 99%);
background: -o-linear-gradient(top, #e5dada 0%, #ffffff 99%);
background: -ms-linear-gradient(top, #e5dada 0%, #ffffff 99%);
background: linear-gradient(to bottom, #e5dada 0%, #ffffff 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5dada', endColorstr='#ffffff', GradientType=0 );
}
我尝试了background-size:contains / cover / 100%..没有用
答案 0 :(得分:3)
答案 1 :(得分:2)
background
属性取决于元素的height
。你没有设置空body
的高度,因此它会导致那些重复的小条带。除非您设置父标记的min-height
,即body
,否则height: 100%
标记的html
属性将无效。
答案 2 :(得分:1)
<强> Demo 强>
html, body {
height: 100%;
margin:0;
padding:0;
}
.gradient {
height: 100%;
width: 100%;
background: #e5dada;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZGFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
/* Fallback (could use .jpg/.png alternatively) */
background-color: red;
/* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: url(fallback-gradient.svg);
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image:
-webkit-gradient(linear, top, bottom, from(#e5dada), to(#fff));
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image:
-webkit-linear-gradient(top, #e5dada 0%, #fff 99%);
/* Firefox 3.6 - 15 */
background-image:
-moz-linear-gradient(top, #e5dada 0%, #fff 99%);
/* Opera 11.1 - 12 */
background-image:
-o-linear-gradient(top, #e5dada 0%, #fff 99%);
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image:
linear-gradient(to bottom, #e5dada 0%, #fff 99%);
}