如何使用文本框输入的变量设置网站背景图片？

• 你的代码逻辑框架没问题，但直接输入图片URL无法生效——CSS背景图片需要用url()语法包裹才能被浏览器识别。
• 修正后的代码如下：

<!DOCTYPE html>
<html>
<body>

Enter URL: <input type="text" id="myText" placeholder="例如：https://example.com/background.jpg">

<button onclick="myFunction()">Set Wallpaper</button>
<script>
function myFunction() {
  var x = document.getElementById("myText").value;
  if (x) {
    // 用url()包裹输入的图片地址
    document.body.style.backgroundImage = `url('${x}')`;
    // 附加优化样式，让背景显示更合理
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.backgroundAttachment = 'fixed';
  }
}
</script>

</body>
</html>

• 核心修改说明：
  • 改用backgroundImage属性明确设置背景图片，比通用的background属性更精准
  • 通过模板字符串将用户输入的URL包裹在url('')格式中，符合CSS语法要求
  • 添加了背景覆盖、不重复、固定定位的样式，提升视觉体验
  • 输入框增加占位提示，引导用户正确输入图片地址

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