Question

我有一个渐变重复的问题。我正在使用此代码的网站背景。这是来自 codepen.io 的 DEMO ，在此演示中您看不到任何问题。但是，如果您使用手机打开此 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上运行良好，但当我用手机打开我的网站时，这个渐变背景在谷歌浏览器上重复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渐变重复

1 个答案: