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");
    
    
    
    点赞 评论

相关推荐 更多相似问题