php - 动态切换图像(使用 PHP)以及 CSS 媒体查询？

Question

我有一个替换标签的图片

<h1 id=myImage>Text</h1>

CSS 看起来像这样:

  h1#myImage {
    text-indent: -9999px;
    background: url('myImage.jpg') no-repeat;
    width: 400px;
    height: 80px;
    }

    @media-only screen and (max-width: 767px) {
    h1#myImage {
    text-indent: -9999px;
    background: url('myImage-mobile.jpg') no-repeat;
    width: 400px;
    height: 80px;
    }
 }

这按照我想要的方式工作(即，当我调整浏览器大小时，我看到图像的移动版本)...但是现在我需要 h1#myImage 以根据用户的偏好动态更改...以便“myImage.jpg”和“myImage-mobile.jpg”被替换为“myNewImage.jpg”和“myNewImage-mobile.jpg”

我也在使用 LESS.js，所以也许如果有某种方法可以将我的 CSS 变量与 php 变量结合起来..

Answer 1

你应该能够将你的 less 文件转换成一个 php 文件，并在其中做任何你想要的变量，然后将它用作你的链接标签中的 href。

样式.php

h1#myImage {
text-indent: -9999px;
background: url('<?php echo $image_name; ?>') no-repeat;
width: 400px;
height: 80px;
}

来自

<link rel="stylesheet/less" type="text/css" href="styles.less">

到

<link rel="stylesheet/less" type="text/css" href="styles.php">

在像 LESS 这样的东西出现之前，这就是你在 PHP 中为动态 CSS 做的事情。