我有我的风格.css其中我将 Bootstrap 容器的背景图像定义为
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('/my/image');
background-size: cover;
color: #ffffff; /* White */;
}
截至目前，网址在css中被硬编码。我将如何随心所欲地从我的 html 中更改它？类似的东西(当然是伪代码)：
<div class="container-fluid bg-img {new_url}">
...
</div>
我有PHP的基本知识，我希望我能用它来实现我需要的东西。
编辑 1
正如@Lukas Meine所建议的那样，我正在尝试jQuery方式。我实际上正在尝试的是在一个 js 文件(scripts.js)中插入一个函数，其中包含我想要的图像 url 的参数变量。然后，我会在我的 HTML 中定义它，例如：
脚本.js
function def_background(img_url) {
$('.container-fluid').css('background-image','url(img_url)');
}
$(document).ready(function() {
def_background(img_url);
});
然后，我将从我的 HTML 调用：
<script src="./js/scripts.js">
def_background(img_url);
</script>
当然，我收到一个错误，说img_url未定义。但是我如何从我的 HTML 中定义它呢？我是否应该在脚本中声明一个临时值.js然后从 HTML 中覆盖它？
目前，我从我的 css 中删除了 url 属性，因为我需要参数化地定义它(我的实际目标)。
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
/* url('/my/image') */
;
background-size: cover;
color: #ffffff; /* White */;
}
编辑 2
继续测试... 我只是创建一个(工作)引导，它准确地显示了我需要的东西。但是，我无法在我的实际代码中重现该行为。唯一的区别是我需要从我的HTML中调用jQuery函数，而不是在与bootply相同的jQuery中调用。此外，在 HTML 中的 js 之前还有其他调用，如果感兴趣，我也会添加它们。
啊，最后一件事：我的 HTML 实际上有一个.php扩展名(所以基本上它们在实践中是 PHP 文件)，不知道这是否在这里有真正的区别......
无论如何，这是我截至目前的文件：
风格.css
.container-fluid.bg-img {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
);
background-size: cover;
color: #ffffff; /* White */;
}
翁贝.js
function def_background(url) {
$(".container-fluid.bg-img").css("background","url('"+ url +"')");
}
animazione.php ( only)
<head>
<title>Sito di Mario Smedile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- my CSS -->
<link rel="stylesheet" href="./css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- my JS -->
<script src="./js/umbe.js">
</script>
<script>
img_url = 'http://via.placeholder.com/350x150/1E90FF';
def_background(img_url);
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include some php -->
<?php include './php/functions.php';?>
</head>
使用 Javascript。在这种特殊情况下，我也在使用jquery。
$(document).on('ready',function(){
$('.container-fluid').css('background-image','url("yournewurl")');
});
Javascript用于操作html。加载页面后，您无法在 html 中进行更改，因为 php 是一种服务器端语言。
编辑：
HTML包含你的脚本.js文件，然后定义你的变量，并调用函数。
<head>
<script src="./js/scripts.js"></script>
<script>
img_url = "define whatever you want here in the html";
def_background(img_url);
</script>
</head>
脚本.js删除就绪触发器
function def_background(img_url) {
$('.container-fluid').css('background-image','url(img_url)');
}
.gradient1 {
background: linear-gradient(#fff, #000);
}
.bg {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<div class="gradient1">
<div class="bg"
style="background-image: url('https://www.google.com.ua/images/nav_logo242.png')"
>test</div>
</div>