Question

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

截至目前，该网址已在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>

Answer 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)'); }

Answer 2

＆＃13;

.gradient1 {
  background: linear-gradient(#fff, #000);
}
.bg {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div class="gradient1">
  <div class="bg" 
  style="background-image: url('https://www.google.com.ua/images/nav_logo242.png')"
  >test</div>
</div>

＆＃13;

参数化后台css属性

2 个答案: