用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並不顯示相同的結果

回答

相關問題