.u-section-1 {
background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("images/curtains/curtains_header.jpg");
background-position: 50% 50%;
}
我在。css和jQuery中有这个类。我不能改变背景图像。
$('.u-section-1').css("background-image", "linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/xabbb-min.jpg')");
HTML是这样的:
<section class="u-align-center u-clearfix u-image u-shading u-section-1" id="carousel_4db0">
我还尝试使用'document.getElementById或ElementsByClassName。JS文件正在运行，但没有发生更改。
提前感谢你试图帮助我。
你的密码管用。（但要确保包含jquery.js）
试试这个看看效果:
null
function change1(){
$('.u-section-1').css("background-image", "linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://i.stack.imgur.com/AEq8P.jpg')");
}.u-section-1 {
background-image: linear-gradient(0deg, rgba(0,255,255,0.2), rgba(0,0,0,0.2)), url("https://i.stack.imgur.com/QuL6B.jpg");
background-position: 50% 50%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="u-align-center u-clearfix u-image u-shading u-section-1" id="carousel_4db0">TEST</div>
<input value="CHANGE" type=button onclick="javascript:change1();">
代码没有问题，我已经用CDN链接和add按钮替换了图像，以更改
null
$(function(){
$(document).on('click','.bgChange', function(){
$('.u-section-1').css("background-image", "linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://picsum.photos/seed/picsum/200/300')");
});
});.u-section-1 {
background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("https://picsum.photos/id/237/200/300");
background-position: 50% 50%;
height:200px;
background-size:contains;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="u-align-center u-clearfix u-image u-shading u-section-1" id="carousel_4db0"><br/>
<button class="bgChange" stype="button">Change BG</button>