html - 添加一些样式后背景图像消失

标签 html css

如果我的问题很愚蠢,请原谅我,我对所有这些技术都很陌生。我的目标是在默认大小下添加图像背景,同时由于它是大尺寸图片而不会缩放,问题是当我添加一些样式时,图像不显示并且背景变空白。 顺便说一下,IM 在这个背景图片上使用了 particle.js。

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Infinite Space !</title>
  <link rel="stylesheet" href="style.css">
</head>
<body >
  <div id="particles-js"></div>

  //particle-js configues
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js">
  </script>
  <script>
    particlesJS.load('particles-js', 'particles.json', function() {
      console.log('callback - particles.js config loaded');
      });
  </script>


  </div>
</body>
</html>



 #particles-js{

  background: url("https://d14xs1qewsqjcd.cloudfront.net/assets/bg-header-star.jpg")
  width: 100%;
  min-height: 800px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* background-attachment: fixed;
}

最佳答案

您没有在背景属性后添加分号:

#particles-js{

  background: url("https://d14xs1qewsqjcd.cloudfront.net/assets/bg-header-star.jpg") /* <---- Semicolon goes here*/
  width: 100%;
  min-height: 800px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* background-attachment: fixed;  /* Also you didnt close this comment */
}

关于html - 添加一些样式后背景图像消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48045067/

相关文章:

jquery - 为什么更改日期后 "datetime-local"的值为空?

javascript - 当文本框值不为空时如何隐藏按钮

javascript - ng-repeat 在 html 中显示数组中对象的索引

php - 用户登录无法正常工作未知错误

html - CSS模仿div中的简单表格

html - 生成六边形背景?

css - 这是视觉隐藏事物的更好方法,clip : rect(0, 0, 0, 0) 或 visibility : hidden?

html - CSS 相对最高百分比在 Chrome 中不起作用

javascript - 将类添加到每 10 个元素中的前 5 个元素

css - 如何修复我的 css 代码以便填充我的网格行?