参数化背景css属性的url属性答案

【问题标题】：Parameterize url attribute of background css property参数化背景css属性的url属性
【发布时间】：2017-06-22 21:27:22
【问题描述】：

我有我的 style.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 */;
}

截至目前，该 url 在 css 中是硬编码的。我将如何根据需要从我的 html 中更改它？类似的东西（当然是伪代码）：

<div class="container-fluid bg-img {new_url}">
   ...
</div>

我对PHP有基本的了解，希望能用它来实现我所需要的。

编辑 1

正如 @Lukas Meine 所建议的，我正在尝试 jQuery 方式。我实际上尝试的是在 js 文件 (scripts.js) 中插入一个函数，其中我想要的图像 url 的变量是参数化的。然后，我会在我的 HTML 中定义它，例如：

scripts.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 中定义它？我应该在 scripts.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

继续测试... 我只是创建了一个（工作）bootply，它正好显示了我需要的东西。但是，我无法在我的实际代码中重现该行为。唯一的区别是我需要从我的 HTML 中调用 jQuery 函数，而不是在 bootply 中的同一个 jQuery 中。另外，HTML中的js之前还有其他调用，如果感兴趣的话我也会添加它们。

啊，最后一件事：我的 HTML 实际上有一个 .php 扩展名（所以实际上它们基本上是 PHP 文件），不知道这在这里是否有真正的不同......

无论如何，这是我现在的文件：

style.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 */;
}

umbe.js

function def_background(url) {
    $(".container-fluid.bg-img").css("background","url('"+ url +"')");
}

animazione.php（仅限）

  <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>

【问题讨论】：

标签： php jquery html css twitter-bootstrap

【解决方案1】：

使用Javascript。在这种特殊情况下，我也使用jquery。

$(document).on('ready',function(){

 $('.container-fluid').css('background-image','url("yournewurl")');

});

Javascript 用于操作 html。页面加载后，您无法更改 html，因为 php 是 server side 语言。

编辑：

HTML 包含您的 scripts.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>

Scripts.js 移除就绪触发器

function def_background(img_url) {
$('.container-fluid').css('background-image','url(img_url)'); 
}

【讨论】：

抱歉回复晚了。我正在尝试你的方法。我想在我的 HTML 文档之外拥有您建议的功能，并且变量“yournewurl”是参数化的。这可能吗？我将编辑我的问题以发布我的尝试。
刚刚编辑了我的答案以满足您的需求。看看;)
不幸的是它不起作用......我制作了一个（工作）引导程序，它模仿了我的需求并更新了我的问题以显示我目前的代码。 bootply.com/idEnpchnXq

【解决方案2】：

.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>

【讨论】：