时间戳

首页 > 解决方案 > 为什么我的 html-css backgrpung 图像重复？

html - 为什么我的 html-css backgrpung 图像重复？

问题描述

背景图片：

图片

页面显示的内容：

我的网站

我使用 colorzilla CSS 渐变生成器生成了图像文件，然后将 base64 转换为 SVG，因为我认为这可以解决它，但猜猜是什么......它没有。

<!DOCTYPE HTML>
<html>
<div>
  <style>
    div {
      /* Location of the image */
      background: url(https://tamescalytest.chadfreeman.repl.co/static/image.svg) center center cover no-repeat fixed;
      background-color: #464646;
    }
  </style>

  <head>
    <title>Flask Template</title>
  </head>

  <body>
    <form action="/user">
      <input type="text" placeholder="username" name="username"></input>
      <input type="submit" value="go to your page"></input>
    </form>
  </body>
</div>

</html>

标签： htmlcss

解决方案

这背后的真正原因是您使用了无效的 CSS。来自CSSbackground文档的引用：

如果简写声明中的属性之一是 bg-size 属性，则必须使用 /（斜杠）将其与 bg-position 属性隔开，例如 background:url(smiley.gif) 10px 20px/50px 50px; 将生成一个背景图像，位于距左侧 10 像素、距顶部 20 像素的位置，并且图像的大小将为 50 像素宽和 50 像素高。

bg-size是cover在你的情况下，并且bg-position是center center。cover和之间没有斜线，center center必须有斜线。

此外，您应该给背景 div 一个类或更好的 id 并在 CSS 选择器中使用它，因为否则，您的所有 div 都将具有该渐变作为背景，这可能不是您想要的。

遵循使用类的整理和工作代码：

<!DOCTYPE HTML>
<html>

<head>
  <style>
    div#formbackground {
      /* Location of the image */
      background: url(https://tamescalytest.chadfreeman.repl.co/static/image.svg) center center/cover no-repeat fixed;
      background-color: #464646;
    }
  </style>
  <title>Flask Template</title>
</head>

<body>
  <div id="formbackground">
    <form action="/user">
      <input type="text" placeholder="username" name="username">
      </br>
      <input type="submit" value="go to your page"></input>
    </form>
  </div>
</body>

</html>

推荐阅读