Question

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

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

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

现在我在每个页面（aboutMe.html，myProject.html）中使用任何supportText div style属性来执行此任务。

例如：

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

但是，如果我的页面有一些不同的图像，正如我之前解释的那样，我应该更改其他html文件吗？

我知道可能在php中有某种解决方案。

考虑到我对php一无所知，但如果以非常简单的方式解释，那么理解就不会有问题！ ;）

javascript中是否有解决方案？

我只使用XHTML和CSS。

修改

谢谢！
你非常善良。

我理解除了一个概念之外的一切，我希望你能澄清一下。
我有很多背景图像的div，如：
title - myPicture - navigation - supportingText

所有这些都有灰度级图像。
我想用户可以改变网站的方面。
有三个选项：

黑白页
绿页
橙页

所以在这种情况下，我需要将 JavaScript 脚本中的 divs images 设置为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来使您的网站更快。

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

2 个答案: