Question

我有一个简单的问题，我需要制作一个开关/按钮，用户点击它以将背景图像切换为开启或关闭

以下是代码：

def payment
  params.permit(:loan_id, :loan_amount)
end

以下是它的CSS：

body style = "background-image: url('WebsiteBG.jpg')"

Answer 1

嗯，您可以使用jQuery或javaScript执行此操作。基本的想法是切换body标记的类。请参阅以下示例：

JavaScript解决方案：

HTML：

<body>
    <div style="color:red;">Some random text here</div>
    <input type="button" id="btnBack" value="Toggle Background" />
</body>

CSS：

body {
    background-size: cover; 
    background-repeat: no-repeat;  
    background-attachment: fixed 
  }

.BgClass {
    background-image: url('http://freedomwallpaper.com/wallpaper2/funky-wallpaper-hd.jpg');
}

的javaScript

var btnBack = document.getElementById('btnBack');
btnBack.addEventListener('click',function() {
    document.body.classList.toggle('BgClass');
});

你可以在这里看到 - ＆gt; http://jsfiddle.net/qagdvft6/

jQuery解决方案

$('#btnBack').click(function() {
    $('body').toggleClass('BgClass');
});

body{
    background-size: cover; 
    background-repeat: no-repeat;  
    background-attachment: fixed 
  }

.BgClass {
    background-image: url('http://freedomwallpaper.com/wallpaper2/funky-wallpaper-hd.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div style="color:red;">Some random text here</div>
    <input type="button" id="btnBack" value="Toggle Background">
</body>

Answer 2

使用jQuery实现这是非常简单的事情。

您可以在此处查看我的示例：http://jsfiddle.net/qwnLj4tj/

使用jQuery，当单击按钮时，我正在切换主体上的样式类：

$('.my-button').click(function() {
    $('body').toggleClass('active-class');
    return false;
});

使用css我只是应用toggleClass的样式：

body.active-class {
    background: url('URL/TO/BGIMAGE.EXT');
}

切换背景图像HTML

2 个答案: