能否使用变量设置背景图片尺寸？附jQuery实现代码示例

当然可以！用变量动态设置背景图片尺寸是完全可行的，不过你提供的代码里有个小语法问题，导致它无法正常工作，我来帮你修正并解释~

问题分析 #

你原来的代码里写了：

$("#canvas").css({ 'background-size': '100px' + setSize });

假设用户输入的数值是20，这段代码会拼接成100px20——这不是有效的CSS尺寸值，浏览器根本识别不了，所以背景尺寸不会生效。

修正后的代码示例 #

我们需要把数值和单位正确组合，以下是两种常见的正确写法：

1. 设置单一尺寸（宽高都使用变量值）

如果希望背景图片的宽高都等于输入的数值（带px单位），可以这样写：

var setSize = $('#inputSize').val();
// 确保输入有值再执行
if (setSize) {
  $("#canvas").css({ 'background-size': setSize + 'px' });
}

2. 设置两个不同的尺寸（比如宽度固定100px，高度用变量）

如果想分别控制宽和高，要在两个值之间加空格：

var setSize = $('#inputSize').val();
if (setSize) {
  $("#canvas").css({ 'background-size': '100px ' + setSize + 'px' });
}

完整可运行示例 #

把HTML和JS结合起来，这样你可以直接测试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 输入尺寸的数字框 -->
<input id="inputSize" class="form-control" type="number" value="" placeholder="输入尺寸数值">
<!-- 用于展示背景的画布 -->
<div id="canvas" style="width: 300px; height: 300px; border: 1px solid #ccc; background-image: url('你的背景图片地址');">
</div>
<!-- 触发更新的按钮 -->
<button onclick="updateBgSize()">更新背景尺寸</button>

<script>
function updateBgSize() {
  var setSize = $('#inputSize').val();
  if (setSize) {
    // 这里可以切换上面两种写法测试
    $("#canvas").css({ 'background-size': setSize + 'px' });
  }
}
</script>

额外提示 #

• 除了px，你也可以使用其他CSS单位，比如%、em、vw等，只要把单位和变量正确拼接就行，比如setSize + '%'。
• 建议加上输入值的校验（比如判断是否为有效数字），避免空值或非数字导致的样式错误。

内容的提问来源于stack exchange，提问作者Matanya dayfani