我刚刚注意到这个奇怪的事情。因此，我有一个主CSS文档，我用一个PHP变量覆盖其中的一个部分，该变量包含在index.PHP的开头，以根据服务器上文件夹中的内容动态更改背景图像。
在典型的CSS中，我有这样的：
.fullscreen{
background: url('./Hero_Image/image01.jpg') no-repeat center center;
}
我为.fullscreen类部分提供了一个很好的全屏图像背景，它根据浏览器窗口进行了适当的缩放，并随着窗口大小的调整而缩放。
然而，当我试图使这一动态，使用php和重写像这样：
<?php
include '_SiteResources/php/loadHeroImage.php'; //<< note: output is basically an echo of the URL of the first file in a folder
?>
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
我注意到使用PHP重写并没有显示相同的结果。是的，它也是全屏的，但我注意到它也不会像最初的CSS实现那样随着窗口的缩放而缩放；它似乎按比例显示，并且不随浏览器窗口缩放。
为什么？
以下是每个请求的loadHeroImage.php的代码：
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') { //Skips over . and ..
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
echo './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
好吧，多亏了@jkon和@EduardoEscobar的一些提示，我终于解决了我的问题。
在<head>标记中重写CSS时，我认为我只需要重写正在更改的一个命令，但似乎我还需要包括其他CSS命令。
在我的CSS中，我的.fullscreen类看起来是这样的：
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
在我的index.php <head>标签中，我用php覆盖了后台URL，如下所示：
<head>
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
</style>
</head>
但我应该做的是包含所有其他CSS代码。这就是最终得到与我的CSS硬编码URL相同的结果：
<style type="text/css">
.fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
height: 100%;
width: 100%;
background-color: #212121;
}
</style>
感谢大家的反馈和帮助！我真的很感激！
我知道你找到了问题的答案，但我只是想扩大我对你答案的评论。
您应该能够仅覆盖背景图像。您只需要包含基本css声明，然后在另一个声明中只覆盖背景图像。
例如：
<head>
<style type="text/css">
/* Base css code */
.fullscreen {
height: 100%;
width: 100%;
background-color: #212121;
background: url('http://pathToImage.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0px 10px 45px #000000;
}
/* Override the background image */
.fullscreen{
background: url('<?php getHeroImage(); ?>') no-repeat center center;
}
</style>
</head>
<?php include("asdkfasdf.php");?>
<head>
<style type="text/css">
.fullscreen{background: url('asdfasdf.jpg');}
</style>
</head>
<div class="fullscreen">asfdasdf</div>
</body>
<?php
if($imageCSS !== null || $imageCSS !== ''){
echo '<style type="text/css">
.fullscreen{background: url('''.$imageCSS.''');}
</style>';
}
?>
</html>
asadfasdf.php
<?php
function getHeroImage(){
$h = opendir('./Hero_Image/'); //Open the current directory
while (false !== ($heroImage = readdir($h))) {
if($heroImage != '.' && $heroImage != '..') {
$heroFileInfo = pathinfo($heroImage);
$heroImagePath = $heroFileInfo['dirname'];
$heroImageBase = $heroFileInfo['basename'];
// $heroImageFullPath = $heroImagePath.$heroImageBase;
$imageCSS = './Hero_Image/'.$heroImageBase.' ';
break;
}
}
}
?>
我不建议在底部使用php，但这是有效的。你不应该在这个空间里回响一整页。包括页面，并仅回显链接。