背景CSS属性

的参数化url属性，我有我的style.css 其中我定义我的背景图片为我的引导容器作为背景CSS属性

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

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

来源

2017-06-22 umbe1987

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

来源

2017-06-22 21:30:22

很抱歉这么晚才回复的。我正在尝试你的方法。我想要在我的HTML文档之外提供您所建议的功能，并将变量“yournewurl”设为参数。这可能吗？我会编辑我的问题发布我的尝试。 – umbe1987

刚编辑我的答案，以适应您的需求。看看;） –

它不工作不幸....我制作了（工作）bootply模仿我的需求，并更新我的问题，目前显示我的代码。 https://www.bootply.com/idEnpchnXq – umbe1987

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

来源

2017-06-22 22:02:32 Mixa

背景CSS属性

回答

相关问题