javascript CSS背景大小规则被覆盖，但不确定原因

qcuzuvrc 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(141)

我尝试使用CSS属性设置背景图像，但使用webpack导入/导出。我遇到了CSS规则不适用的问题，并且在开发控制台上显示划掉了，但我不确定为什么或如何修复它。

body {
    margin: 0;
    max-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

HTML代码是

<html>
  <head>
    <meta charset="utf-8" />
   <title>Asset Management</title>
   <script src="bundle.js" defer></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

导出的JS为：

import Background from './background.png';
export const setBackGroundImage = () => {
  let body = document.querySelector('body');
  body.style.background = `url(${Background})`;
};

导入的JS为：

import './style.css';
import { setBackGroundImage } from './initial-page-load';

setBackGroundImage();

我知道这个设置是完全不必要的，但它是顶部，课程步骤，以适应webpack。
当我在dist/中加载index.html时，它显示https://i.imgur.com/38ljGad.png和CSS文件规则被划掉并被https://i.imgur.com/aAz1GF7.png覆盖，这使得图像重复。
我不知道为什么会发生这种情况，并希望得到任何帮助。我试过直接在CSS上将图像设置为背景图像，这是可行的，但我想练习webpack，并被困在我错过的东西上。
谢谢！

JavaScript

来源：https://stackoverflow.com/questions/76168613/css-background-size-rule-being-overridden-but-not-sure-why

2条答案

按热度按时间

fnvucqvd1#

更新您的setBackgroundImage()函数

body.style.background = `url(${Background})`;

到这个

body.style.backgroundImage = `url(${Background})`;

而不是做你想做的事我用你提供的东西进行了测试，这似乎解决了我的问题。

赞(0）回复(0）举报 2023-05-05

v9tzhpje2#

CSS background属性简写包含其他背景属性的默认值，这些属性覆盖了CSS选择器，因为它比元素上的内联属性（JavaScript负责）更不具体。如果只更改负责背景图像的background-image，则可以避免此冲突。
这里有一个简单的例子来说明：

div {
  height: 200px;
  width: 100%;
  background-image: url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg);
  background-repeat: no-repeat;
}

<!-- div with inline background value overwriting CSS background-image -->
<div style="background:url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg)"></div>

<!-- div with CSS values only -->
<div></div>

<!-- div with inline background-image value and CSS background-repeat value -->
<div style="background-image:url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg)"></div>

正如您所看到的，设置了background的元素没有继承background-repeat`值。如果在检查器中展开background属性（通常在速记属性旁边有一个小箭头），您应该能够看到值已被更改。

赞(0）回复(0）举报 2023-05-05

我来回答

javascript CSS背景大小规则被覆盖，但不确定原因

2条答案

相关问题

热门标签

最新问答