用PHP替代CSS并不显示相同的结果

我刚注意到这个奇怪的事情。所以我有一个CSS主文档，我用一个PHP变量覆盖了其中的一个部分，我在index.php的开头添加了一个PHP变量，以根据服务器上的文件夹中的内容动态更改背景图像。用PHP替代CSS并不显示相同的结果

在典型的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; 
     } 
    } 
} 
?>

来源

2016-01-04 dotcommer

什么是PHP实现的（HTML）输出？它与静态CSS实现有什么不同？ –

发布代码loadHeroImage.php –

也，如果你有错误报告你会注意到，这是抛出一个错误，应该在它后面的缺少分号..'getHeroImage（）' –

好吧，我管理我的问题，感谢找出从@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>标签，我只是覆盖的背景URL与PHP像这样：

<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>

感谢大家的反馈和帮助！对此，我真的非常感激！

来源

2016-01-04 22:43:02 dotcommer

哦......看起来我不能将这个答案设置为另外两天的答案，因为我回答了我自己的问题？来吧S.O.那很愚蠢。 – dotcommer

有一点需要注意的是，你应该能够做你正在尝试做的事（覆盖只是背景图像）。但是你必须在你的文档中包含基本的css代码。这就是为什么它被称为级联样式表。 –

我知道你找到了你的问题的答案，但我只想扩大我对你的答案的评论。

你应该只能覆盖背景图像。你只需要包含基本的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>

来源

2016-01-04 22:58:08

啊，我明白了。感谢您的澄清。 – dotcommer

<?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，但这个工程。你不应该回应整个页面的空间。包括该页面，并仅回显链接。

来源

2016-01-05 00:33:39

用PHP替代CSS并不显示相同的结果

回答

相关问题