我正在尝试将一些 CSS 应用于网页背景，但我不太确定如何操作。我有一个脚本，当有人点击一个按钮时，它会改变背景图像。但是，图像未按比例缩放且大小不正确。我想为图像添加一些样式，但不知道在哪里做。我正在尝试添加:
background:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
进入每张图片。所以当有人点击一个按钮时，它是一个非常适合屏幕的单一图像。有没有人对我可以在哪里将这些样式添加到背景图像有任何建议？感谢您的宝贵时间和帮助。
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url(Pic/jungle.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var rotate = 0;
var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
$('body').on("click", function () {
$(this).css({
'background-image': colors[rotate]
});
rotate++;
if (rotate >= 2) {
rotate = 0;
}
});
});
</script>
</body>
</html>
最佳答案
您正在使用 $(this).css('background') 完全覆盖背景属性。尝试改用背景图片。
关于javascript - HTML、jquery显示时调整图片大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25231525/