如何在php中从css重新加载背景图像？答案

【问题标题】：How to reload the background image from css in php?如何在php中从css重新加载背景图像？
【发布时间】：2021-05-26 01:47:50
【问题描述】：

我使用单独的CSS 从本地文件加载背景图像。一个乏味的事情是PHP 在我修改文件后没有更新它的缓存。对我来说，给后台 URL 一个随机数也行不通。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1 width=device-width">
    <title>PHP-001</title>
    <link rel="stylesheet" href="./public/css/styles.css?v=<?php echo time(); ?>">
  </head>
  <body>
    <section>
      test
    </section>
  </body>
</html>

section {
  background: url("./public/images/bg1.jpg?v=002");
}

所以我将<style> 元素直接赋予<head> 元素以强制更新PHP。这个基本上可以工作，但它不会将图像永久保存到浏览器文件中。在我删除<style> 部分然后尝试从CSS 加载图像后，它不再工作了。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1 width=device-width">
    <title>PHP-001</title>
    <style media="screen">
      header {
        background: url("./public/images/section.png?v=<?php echo time(); ?>");
      }
    </style>
  </head>
  <body>
    <section>
      test
    </section>
  </body>
</html>

enter image description here

我想从CSS 文件加载/重新加载我的背景图片。

有什么技巧可以解决这个问题吗？

【问题讨论】：

这一切似乎都与 PHP 无关，或者至少不清楚为什么会这样。 A tedious thing is PHP does not update its cache after I modified the file 到底是什么意思？与其向我们提供您对问题原因的推测（没有提供任何明确的证据），不如告诉我们您看到的实际行为以及导致您出现问题的原因会更有用。 FWIW PHP 不会缓存您的 CSS 文件。但是网络服务器可能。或者浏览器可能。或者您是说 time() 函数有问题？有点不清楚。
正如 ADyson 所说，这根本不是 PHP。 CSS 文件是静态内容，默认情况下所有 HTTP 服务器都使用长期缓存标头提供服务。然后，这些文件会被客户端浏览器和中间缓存（例如：CDN、代理等）相应地缓存。这一切都按预期工作，除了您在不更改文件名的情况下更改文件的内容。正如其他人所建议的那样，您可以将垃圾添加到 URL 并以这种方式破坏缓存，但根本原因是内容更改时您没有更改文件名。

标签： php html css browser reload

【解决方案1】：

首先，请注意 PHP 没有进行任何缓存。正如@ADyson 在评论中指出的那样，您的服务器或浏览器可能会缓存内容。

您表达的问题似乎是“某处”背景图像正在被缓存，并且当您更改图像时不会刷新，因为 url 保持不变。

你试过了：

  <link rel="stylesheet" href="./public/css/styles.css?v=<?php echo time(); ?>">

但所做的只是让浏览器（或任何人）认为最好重新加载styles.css，而不是使用缓存版本（如果有的话）。因此，正如您所观察到的那样刷新图像不起作用。

但是，当你尝试时

<style media="screen">
  header {
    background: url("./public/images/section.png?v=<?php echo time(); ?>");
  }
</style>

你确实得到了新图像。

在第一种情况下，从 css 文件加载，没有人告诉浏览器（或任何人）它不应该使用它已经缓存的图像（如果有的话）。它查看 url 并发现它与已有的相同，因此不再费心获取它。

一种方法是按照您在第二种情况下所做的那样继续进行，因为它有效。或者用像你的 ?v=something

这样随机的东西重写 CSS 文件

【讨论】：

这将使每个请求的缓存无效，这并不完全理想。要么更改您的 Web 服务器关于它为静态文件设置的缓存头的设置 [通常是“永远”，因为静态文件是静态的]，要么做正确的事情并根据它们的内容命名您的静态文件，这样缓存行为就无关紧要了.