如何使用CSS更改网站页面的不同背景图像？

Question

我为我的英语道歉。 如果需要，请更正标题。

我希望网站的不同页面在某些背景div中具有不同的图像。 我在所有站点上使用一个CSS文件。

例如，“关于我”页面的supportingText div与“我的项目页面”具有不同的图像。

现在，我在所有页面（aboutMe.html，myProject.html）中为所有supportingText div使用此任务的style属性。

例如：

当我想让冲浪者更改整个网站的样式设计时，我当然可以更改为其他CSS文件。

但是，如果我的页面有一些不同的图像（如我之前所述），是否应该更改其他html文件来做到这一点？

我知道大概在php有某种解决方案。

考虑到我对php一无所知，但是如果您以非常简单的方式进行解释将不会成为理解的问题！ ;）

在javascript有解决方案吗？

我只使用XHTML和CSS。

编辑

谢谢！
你真好

除了一个我希望您可以澄清的概念，我了解所有内容。
我有很多具有背景图片的div，例如：
title - myPicture - navigation - supportingText

所有这些都有灰度图像。
我希望用户可以更改网站的外观。
大概三个选项：

• 黑白页面
• 绿页
• 橙色页面

因此，在这种情况下，我需要将JavaScript脚本中的divs图像设置为html文件作为您的示例！
因此，CSS文件仅对尺寸和所有其他员工有用，而对图像背景不再有用吗？ 是吗？

非常感谢！

Answer 1

我同意John的观点，您确实不应该将style属性硬编码到HTML中。 但是，无论出于何种原因，都可以使用JavaScript轻松更改它们。

document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';

或者如果您使用的是jQuery

$('#supportingText').css('background-image', 'url("image.jpg")');

更新 ：

假设您使用按钮来触发更改，则代码（将其放入HTML文档中）将如下所示：

<script type="text/javascript">
    function changeBackground(divId, newImage) {
        document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
    }
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>

本质上，您在这里所做的就是创建一个调用JavaScript函数的按钮（ changeBackground() ），然后传入要更改的div的ID和要更改的图像文件的名称。更改为。 您可以在'supportingText'和'image.jpg'参数中使用多个具有不同值的按钮。

第2部分的答案 ：

您可以通过CSS或JS应用样式（如上所述）。 但是，您在JS中所做的任何操作都会覆盖CSS。 如何将其划分完全取决于您。

Answer 2

如果您已经将样式（甚至只是其中的一些样式）硬编码到HTML中，并且您希望在有人选择新样式表时更改这些值，那么您将处于困境。 将这些样式硬编码到HTML中会使代码变得不灵活，并且使您无法使用PHP或JavaScript动态简化切换样式表之类的事情。

最好的选择是从HTML中删除硬编码的样式规则，并将其放入样式表中。 然后，可以使用PHP或JavaScript轻松切换stylehseet。

如果您无法删除它们，那么您将需要编写自己的JavaScript来做到这一点，这将很繁琐，因为它需要在加载每个页面时动态地对其进行更改。 这可能不仅需要花费很长时间而且容易出错，而且如果处理不当也会损害您网站的性能。

基本上，通过将样式规则硬编码到HTML中，您就束手无策了，没有可用的好选择。 我建议删除硬编码的样式，并确保以后避免再次进行。 不仅可以避免此类问题，还可以通过缓存CSS来加快网站速度。