我有一个替换标签的图片
<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 变量结合起来..
最佳答案
你应该能够将你的 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 做的事情。
关于php - 动态切换图像(使用 PHP)以及 CSS 媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9265207/