我有一个梯度重复的问题。我将此代码用于网站背景。
这是来自codepen.io的DEMO，在此演示中您看不到任何问题。但是，如果用Phone打开此DEMO，则可以看到问题是重复y轴
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #ffffff 0%,#abc0d7 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%,#abc0d7 100%);
background-image: -o-linear-gradient(top, #ffffff 0%,#abc0d7 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#abc0d7 100%);
background-image: linear-gradient(top, #ffffff 0%,#abc0d7 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
background-attachment:fixed;
background-repeat: no-repeat;
height: 100%;
}
此代码在PC上效果很好，但是当我用手机打开我的网站时，此渐变背景在google chrome上重复y轴。
最佳答案
我认为这将帮助您：
过去<head>..Here..</head>的这段代码
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
允许您显示适当的移动设备。
并为
style.css添加以下代码 html
{
min-height: 100%;
}
body{
/*Here is your body CSS code*/
background-size: auto 100%; /*Just add this for full size*/
}
关于css - CSS梯度在手机上重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27735760/