背景图像样式在 HTML 标头中不起作用答案

【问题标题】：background-image style not working in HTML header背景图像样式在 HTML 标头中不起作用
【发布时间】：2019-06-15 00:33:59
【问题描述】：

我正在尝试在按下按钮时更改 css 类的“背景图像：”。

jQuery:

$(function() {
    $('button').on('click', function() {
        $('.masthead2').css('background-image', 'url("../img/whiteheader.png")');
    });
});

CSS：

.masthead2 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 35rem;
    padding: 15rem 0;
    background-image: url("../img/roseheader.png");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

当我按下按钮时，CSS 样式中的“背景图像：”被删除。然后 HTML 从此改变：

<header class="masthead2">

到这里：

<header class="masthead2" style='background-image: url("../img/whiteheader.png");'

但是，在页面上；根本没有图像显示。我尝试将 url 直接复制到 css 中并加载新图像。所以我相信这个网址是正确的。

如果直接在css中更改背景图像，这应该可以解决问题。

【问题讨论】：

你检查过控制台吗？
@Adrift 是的，没有任何显示：/

标签： javascript jquery html css

【解决方案1】：

图片的路径可能有误。如果它在 css 内部，则路径是相对于 css 文件的，但在 html 内部并不代表相同的位置。尝试图像的绝对路径。例如

$(function() {
    $('button').on('click', function() {
        $('.masthead2').css('background-image', 'url("http://www.mywebsite.com/img/whiteheader.png")');
    });
});

【讨论】：

是的，你是对的。更改为 url("image/whiteheader.png")。非常感谢。
或者试试这个 $('.masthead2').css('background-image', 'url("img/whiteheader.png")');

【解决方案2】：

我已经检查过，完整的代码，它在我的最后工作，请检查你的图片网址，如果那里有图片。这是代码：-

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link rel="stylesheet" href="style.css" />
    <style>
        .masthead2 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 35rem;
    padding: 15rem 0;
    background-image: url("https://lh3.googleusercontent.com/proxy/ogwfaF0iwa05OnTNQFyD0rZ384sAN74p5xwJE6qfJmrEFcmgxlXo4zg22lrlaLcaS_hp9pFCu8s8QZ-GgDy37DxWVOHpq2B4IV35vb4wgHBWfJiYqI_AVARVMaguPane4Raedg=w530-h212-p-rw");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}
    </style>
</head>

<body>

  <header class="masthead2"></header>

<button>Submit</button>

</body>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script>
    $(function() {
    $('button').on('click', function() {
        $('.masthead2').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png")');
    });
});
</script>
</html>

【讨论】：

是的，它是图片网址。我只需要删除网址中的“..”。感谢您的帮助
非常感谢。