首页 > 解决方案 > 如何在php中从css重新加载背景图像?

问题描述

我使用分隔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>

在此处输入图像描述

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

解决问题的任何提示?

标签: phphtmlcssbrowserreload

解决方案


首先,请注意 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 并发现它与已有的 URL 相同,因此不再费心获取它。

一种方法是像在第二种情况下那样继续进行,因为它有效。或者用你的 ?v=something 等随机的东西重写 CSS 文件


推荐阅读