CSS3渐变背景无法正常工作_Css

CSS3渐变背景无法正常工作

css

CSS3渐变背景无法正常工作,css,Css,我正在使用CSS3梯度，在本地系统中正确加载。一旦我们上传了那个文件，它就会像带渐变的条纹块一样显示出来 html, body { height: 100%; margin:0; padding:0; } .gradient { height: 100%; width: 100%; background: #e5dada; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2l

我正在使用CSS3梯度，在本地系统中正确加载。一旦我们上传了那个文件，它就会像带渐变的条纹块一样显示出来

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%);

}

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 );
}

我试过背景尺寸：contain/cover/100%。。没用

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%); }

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%); }
只需添加：

html,body{ height:100%; margin:0; padding:0; }
到你的css
此处更新。
只需添加：

html,body{ height:100%; margin:0; padding:0; }
到你的css

此处更新。
背景属性取决于元素的高度。你们并没有设置你们的空
身体的高度
，所以它会导致那个些重复的小条纹。
body
标记的
min height
属性将不起作用，除非您设置父标记的
height:100%
，即
html

背景属性取决于元素的高度。你们并没有设置你们的空
身体的高度
，所以它会导致那个些重复的小条纹。
body
标记的
min height
属性将不起作用，除非您设置父标记的
height:100%
，即
html