根据URL部分更改背景图像

Change background image based on URL parts

本文关键字：背景 图像 URL 根据      更新时间：2023-09-26

我正在尝试将该功能添加到我的网站中，其中背景将使用样式表根据URL的一部分进行更改。

示例：

address/shop/index.php             = background image 1
address/shop/index.php?cPath=22    = background image 2
address/shop/index.php?cPath=23    = background image 3
address/shop/index.php?cPath=24    = background image 4

有什么想法吗？我看过Javascript和jQuery，但不确定该选择哪一个或如何进行

看起来你在使用PHP，所以你应该能够在没有javascript的情况下完成它。您只需要使用PHP的服务器变量。

类似的东西

 $cPath = $_GET['cPath']; //This allows access to the query part of the url
 if($cPath == 24){
     //set background url
 }

您可以总是让url的一部分被一个标签包围，例如<font>所以代码应该是这样的：

<a>your url link 
    <font class='background1'>part with background1</font>
    <font class='background2'>part with background2</font>
</a>

然后在css中可以有

.background1{background: url('...')}
.background2{background: url('...')}

这可能是一种很粗糙的方式，但通过这种方式，你至少可以对你的"链接部分"进行分类。

如果你真的想做这个客户端，我建议：

var pageBackground = {
    'default' : 'classOne',
    '22' : 'classTwo',
    '23' : 'classThree'
};
document.body.className = pageBackground[window.location.split('cPath=')[1] || 'default'];

结合样式表：

body.classOne {
    background-image: url(path/to/defaultImage.png);
}
body.classTwo {
    background-image: url(path/to/imageTwo.png);
}
body.classThree {
    background-image: url(path/to/imageThree.png);
}

在您的html页面上的body标记类型内：

<body background="your file">
</body>

你可以在每个想要不同背景的页面上这样做，它将覆盖任何为主体设置样式的CSS样式

相关文章：