背景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>
使用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)');
}
.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>
很抱歉这么晚才回复的。我正在尝试你的方法。我想要在我的HTML文档之外提供您所建议的功能,并将变量“yournewurl”设为参数。这可能吗?我会编辑我的问题发布我的尝试。 – umbe1987
刚编辑我的答案,以适应您的需求。看看;) –
它不工作不幸....我制作了(工作)bootply模仿我的需求,并更新我的问题,目前显示我的代码。 https://www.bootply.com/idEnpchnXq – umbe1987