Question

我刚开始学习xhtml和css。我为自己写了一个网页。在笔记本电脑和PC浏览器中打开它看起来很好。但是背景图像在移动浏览器中垂直重复两次。我试图设置宽度，高度或背景重复来修改它，但每当我这样做时，图像就会消失。我抬头看到这里，其他答案有点太深，我无法理解。

这是我的网页：clownbox.tech

这是我身体的css代码：

        body {
          text-align:center;
          background-image:url(dark-gradient-tumblr-wallpaper-1.jpg)
        }

这是正文的html代码：

  <body>

    <h1>Chris Guo</h1>

    <table border="1" cellpadding="10" cellspacing="10">
      <tr>
        <td><a href="https://www.facebook.com/profile.php?id=100004400829590">Facebook</a></td>
        <td><a href="http://chrisgjh.tumblr.com/">Tumblr</a></td>
        <td><a href="https://www.instagram.com/gjjhhh_/">Instagram</a></td>
      </tr>
    </table>
    <br />
    <p>CS student @University of Canterbury, amateur photographer.<br />
    I have a little bit of passion about everything and always keen to 
    try new things. <br />
    <br />
    <a href="mailto:gjh93@yahoo.com">Email Chris</a>
  </body>

Answer 1

将css更改为：

const des = str => str.split(".").reduceRight( (prev, key) => ({[key]: prev}) );

console.log(des("presentation.launchBehavior.newWindow"));

来自：https://stackoverflow.com/a/22556456/6496271

Answer 2

Aaron的解决方案是正确的。

然而，由于你是公认的新手，我很乐意添加这个。 Aaron的解决方案非常适合使用图像，而您的问题实际上是关于使用图像。但是，在这种情况下，您的背景是渐变。如果你想渲染一个渐变，最好简单地通过css渲染一个渐变，并避免完全使用一个图像。

这是一个例子： https://jsfiddle.net/yojuo7m2/2/

background: linear-gradient(to bottom, #89ffde 0%,#8f4bff 100%) no-repeat fixed;

上面的代码将为您提供现代浏览器的渐变。有关旧版浏览器的其他语法，请参阅小提琴。

我建议您阅读渐变以充分了解语法。但是，一旦理解了它，就可以在colorzilla的梯度生成器站点轻松地为它们创建代码。以下是指向特定渐变的链接：http://www.colorzilla.com/gradient-editor/#89ffde+0,8f4bff+100

我希望这对Aaron的解决方案有用。

在移动浏览器中打开时重复html背景图像

2 个答案: