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 安装svn网络有问题怎么办
  • ¥15 Python爬取指定微博话题下的内容，保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥15 latex怎么处理论文引理引用参考文献