我一直在编写这段代码，我需要通过HTML按钮接受用户的输入，然后将网络图像的输入URL分配给CSS文件中的.bg｛background:URL('URL'(｝。有什么办法我能做到吗？
.bg {
background: URL(' *user input image URL * ')
}
这是我最初一直在做的项目，所以我希望用户输入URL，然后显示使用用户输入的模糊加载帖子https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading
如您所见，我将在3秒钟后更新后台。这不会更改css文件，但会实时更改css。您所需要做的就是更新存储在元素的背景样式部分中的内容。你只需要图片的链接。如果你想在css中永久更新，有两种方法可以实现，保持css不变并更改引用文件，或者用不同的脚本写入css文件并重新加载。
setTimeout(function () {
document.getElementById("bg").style.background ="URL('https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI')";
}, 3000);#bg {
color: blue;
background: URL('https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U');
height: 400px;
}<div id="bg"></div>我认为你可以这样做
function setImage() {
const input_from_user = document.getElementById("input_from_user");
const image_url = input_from_user.value;
const bg_container = document.getElementsByClassName("bg")[0];
bg_container.style.backgroundImage = `url(${image_url})`;
}.bg {
width: 400px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="bg"></div>
<input type="url" id="input_from_user" />
<button onclick="setImage()">Set Image</button>
</body>
</html>可以尝试使用此图像：https://www.google.nl/images/srpr/logo3w.png
希望这能有所帮助。