duanang58939 2019-06-11 17:01
浏览 83
已采纳

使用PHP的动态CSS

I tryed to include a changeing background with an PHP CSS file but even if I try my web page is blank or the background is empty...

The server is based on Linux and is running PHP 7 and Apache 2.

index.php (Version 1)

<link rel="stylesheet" type="text/css" href="./css/background.php.css">

index.php (Version 2)

<body>
    <style>
        <?php
            include("./css/background.php.css");
        ?>
    </style>
</body>

background.php.css

<?php
    echo("
        @charset "utf-8";
        /* CSS Document */
    ");
    error_reporting(E_ALL);

    $choicer = rand(1, 9);

    if ($choicer == 1) {
        echo('
            body{
                background-color: #333;
                background-image: url("../imgs/bg$choicer.jpg");
                background-attachment: fixed;
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        ');
    }
    else {
        if ($choicer == 2) {
            echo('
                body{
                    background-color: #333;
                    background-image: url("../imgs/bg$choicer.jpg");
                    background-attachment: fixed;
                    background-position: center;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            ');
        }
        else {
            if ($choicer == 3) {
                echo('
                    body{
                        background-color: #333;
                        background-image: url("../imgs/bg$choicer.jpg");
                        background-attachment: fixed;
                        background-position: center;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                ');
            }
            else {
                if ($choicer == 4) {
                    echo('
                        body{
                            background-color: #333;
                            background-image: url("../imgs/bg$choicer.jpg");
                            background-attachment: fixed;
                            background-position: center;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                    ');
                }
                else {
                    if ($choicer == 5) {
                        echo('
                            body{
                                background-color: #333;
                                background-image: url("../imgs/bg$choicer.jpg");
                                background-attachment: fixed;
                                background-position: center;
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }
                        ');
                    }
                    else {
                        if ($choicer == 6) {
                            echo('
                                body{
                                    background-color: #333;
                                    background-image: url("../imgs/bg$choicer.jpg");
                                    background-attachment: fixed;
                                    background-position: center;
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                }
                            ');
                        }
                        else {
                            if ($choicer == 7) {
                                echo('
                                    body{
                                        background-color: #333;
                                        background-image: url("../imgs/bg$choicer.jpg");
                                        background-attachment: fixed;
                                        background-position: center;
                                        background-size: 100% 100%;
                                        background-repeat: no-repeat;
                                    }
                                ');
                            }
                            else {
                                if ($choicer == 8) {
                                    echo('
                                        body{
                                            background-color: #333;
                                            background-image: url("../imgs/bg$choicer.jpg");
                                            background-attachment: fixed;
                                            background-position: center;
                                            background-size: 100% 100%;
                                            background-repeat: no-repeat;
                                        }
                                    ');
                                }
                                else {
                                    echo('
                                        body{
                                            background-color: #333;
                                            background-image: url("../imgs/bg$choicer.jpg");
                                            background-attachment: fixed;
                                            background-position: center;
                                            background-size: 100% 100%;
                                            background-repeat: no-repeat;
                                        }
                                    ');
                                }
                            }
                        }
                    }
                }
            }
        }
    }

?>

I hope some one can help me here with this problem.

  • 写回答

1条回答 默认 最新

  • dongniechi7825 2019-06-12 02:07
    关注

    This can be done. I have done it many times and it does not require changing anything at the web server's level. The common mistake that people make is to believe that the file extension matter when loading a CSS file in an HTML page.

    The tag is already telling the browser to load the file as CSS. Now if the browser tries to be smart about it and check the MIME type of the file, then you can set the proper header in your PHP file. I have done this several time with success. And here is an example that I have just tested in Chrome, Firefox and Safari.

    <?php
// css.php

header("Content-type: text/css; charset: UTF-8");

echo <<<CSS

p {
  color: red;
}

body {
  font-size: 3em;
}

CSS;

    In this example I am using the heredoc syntax to avoid fiddling too much with escaping quotes if needed. Besides, the code is more readable that way.

    Notice that I am setting the content type and the charset of the file. This technique can be used to make PHP generate images (jpeg, png, etc.) or PDF, Excel, Word document. Your imagination and your knowledge of the format of the document that you need to generate are the limit.

    The HTML files that will load this PHP generated CSS file could look like the following code...

    <!-- index.html -->

<html>
<head>
    <title>CSS + PHP</title>
    <link rel="stylesheet" href="css.php">
    <body>
        <p>This is a paragraph</p>
    </body>
</head>
</html>

    And to make this even better, you can have your CSS in a separate files. For instance, style.css and include that file from the css.php file. 

    <?php
// css.php

header("Content-type: text/css; charset: UTF-8");

print file_get_contents("style.css");
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算