css 在移动设备上重复渐变

Question

我有一个梯度重复问题。我将此代码用于网站背景。这是 DEMO from codepen.io in this demo you can not see any problem. But if you open this DEMO 和 Phone 然后你可以看到问题是重复 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 上运行良好，但当我打开我的网站时 phone 此渐变背景在 google chrome 上重复 y 轴。

Answer 1

我认为这会对你有所帮助：

从 <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 gradient repeat on mobile

css

mobile