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

Question

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

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

例如，“关于我”页面的 supportingText div 与“我的元素页面”的图像不同。

现在我在每个页面(aboutMe.html、myProject.html)中为任何支持文本 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。如何划分完全取决于您。