使用CodeIgniter Framework for PHP將圖像添加到引導巨無霸

Question

我需要在將圖像作為背景添加到PHP的Codeigniter框架中的Bootstraps巨型botron時需要幫助。

我目前可以使用以下代碼將圖像添加到Codeigniter，這沒有問題：

<img src="<?php echo base_url('image/test.jpg'); ?>">

我還可以使用我的CSS文件通過以下代碼來更改巨型機的背景：

.jumbotron {
color: black;
text-align: center;
background-color: red;}

但是，我不確定如何獲取css文件以將圖像添加到超大背景。 我嘗試了以下方法：

.jumbotron {
color: black;
text-align: center;
background-image: <?php echo base_url('image/test.jpg'); ?> }

.jumbotron {
color: black;
text-align: center;
background-image: url('image/test.jpg');}

.jumbotron {
color: black;
text-align: center;
background-image: 'image/test.jpg'}

我嘗試的所有方法似乎都無效。 我的圖像文件夾確實位於項目下，而不位於應用程序文件夾中。 我可以將圖像顯示在頁面上的任何位置，這不是問題。 但是，將它們作為超大背景燈作為背景是行不通的。

Answer 1

最簡單的方法是將其應用到您的Jumbotron。

在您看來，嘗試以下操作：

<div class="jumbotron" style="background-image: url('<?= base_url('image/test.jpg'); ?>')">
    ...
</div>

您仍然可以對背景圖像進行其余樣式設置，例如，對於巨型飛機，在CSS中使用background-size 。

PHP不會解析CSS文件，除非您專門更改服務器以解析它們或從具有CSS擴展名的PHP文件中輸出它們。

在示例中的CSS中手動指定背景圖片無法正常工作，因為您有相對路徑來指定圖片位置。 例如，瀏覽器將在/css/image/test.jpg而不是/image/test.jpg查找圖片。 如果您在CSS中指定了background-image: url('/image/test.jpg') ，則應該可以使用。