Javascript 背景图像样式在HTML标题中不起作用_Javascript_Jquery_Html_Css

Javascript 背景图像样式在HTML标题中不起作用

javascript jquery html css

Javascript 背景图像样式在HTML标题中不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在按下按钮时更改css类的“背景图像” JQuery： $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whiteheader.png")'); }); }); CSS: 当我按下按钮时，CSS样式中的“背景图像：”被删除。然后HTML将从以下内容更改： <header class="mas

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

JQuery：

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

CSS:

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

<header class="masthead2">

为此：

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

图像的路径可能错误。如果它在css中，则路径相对于css文件，但在html中并不表示相同的位置。尝试图像的绝对路径。 e、 g

我已经检查，完整的代码，它在我的工作结束，请检查您的图像网址，如果图像存在。代码如下：-

    <!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>


动画
.桅顶2{
位置：相对位置；
宽度：100%；
高度：自动；
最小高度：35雷姆；
填充：150；
背景图像：url（“https://lh3.googleusercontent.com/proxy/ogwfaF0iwa05OnTNQFyD0rZ384sAN74p5xwJE6qfJmrEFcmgxlXo4zg22lrlaLcaS_hp9pFCu8s8QZ-GgDy37DxWVOHpq2B4IV35vb4wgHBWfJiYqI_AVARVMaguPane4Raedg=w530-h212-p-rw”）；
背景位置：中心；
背景重复：无重复；
背景附件：滚动条；
背景尺寸：封面；
}
提交
$（函数（）{
$（'button'）。在（'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”）；
});
});

我已经检查了，完整的代码，它在我这边工作，请检查您的图像url，如果图像存在。代码如下：-

    <!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>


动画
.桅顶2{
位置：相对位置；
宽度：100%；
高度：自动；
最小高度：35雷姆；
填充：150；
背景图像：url（“https://lh3.googleusercontent.com/proxy/ogwfaF0iwa05OnTNQFyD0rZ384sAN74p5xwJE6qfJmrEFcmgxlXo4zg22lrlaLcaS_hp9pFCu8s8QZ-GgDy37DxWVOHpq2B4IV35vb4wgHBWfJiYqI_AVARVMaguPane4Raedg=w530-h212-p-rw”）；
背景位置：中心；
背景重复：无重复；
背景附件：滚动条；
背景尺寸：封面；
}
提交
$（函数（）{
$（'button'）。在（'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”）；
});
});

你检查控制台了吗？@Adrift是的，没有显示任何东西：/n你检查控制台了吗？@Adrift是的，没有显示任何东西：/n是的，你是对的。更改为url（“image/whiteheader.png”）。非常感谢。或者试试这个$（'.masthead2'）.css（'background-image'，'url（“img/whiteheader.png”）；是的，你说得对。更改为url（“image/whiteheader.png”）。非常感谢。或者试试这个$（'.masthead2'）.css（'background-image'，'url（“img/whiteheader.png”）；是的，这是图像url。我只需要删除url中的“.”。谢谢你的帮助非常感谢。是的，这是图片的网址。我只需要删除url中的“.”。谢谢你的帮助，非常感谢。

    <!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>