php - 使用 PHP 的动态 CSS

标签 php html css

我尝试在 PHP CSS 文件中包含一个不断变化的背景,但即使我尝试我的网页是空白的或背景是空的...

服务器基于 Linux,运行 PHP 7 和 Apache 2。

index.php(版本 1)

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

index.php(版本 2)

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

背景.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;
                                        }
                                    ');
                                }
                            }
                        }
                    }
                }
            }
        }
    }

?>

我希望有人能帮我解决这个问题。

最佳答案

这是可以做到的。我已经做过很多次了,它不需要在 Web 服务器级别进行任何更改。人们常犯的错误是认为在 HTML 页面中加载 CSS 文件时文件扩展名很重要。

标签已经告诉浏览器将文件加载为 CSS。现在,如果浏览器尝试对其进行智能检查并检查文件的 MIME 类型,那么您可以在 PHP 文件中设置正确的 header 。我已经成功完成了几次。这是我刚刚在 Chrome、Firefox 和 Safari 中测试过的示例。

<?php
// css.php

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

echo <<<CSS

p {
  color: red;
}

body {
  font-size: 3em;
}

CSS;

在这个例子中,我使用 heredoc 语法来避免在需要时过多地使用转义引号。此外,这样代码的可读性更高。

请注意,我正在设置文件的内容类型和字符集。该技术可用于使PHP生成图像(jpeg、png等)或PDF、Excel、Word文档。您的想象力和您对需要生成的文档格式的了解是有限的。

将加载此 PHP 生成的 CSS 文件的 HTML 文件可能类似于以下代码...

<!-- index.html -->

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

为了使它变得更好,您可以将 CSS 放在单独的文件中。例如,style.css 并从 css.php 文件中包含该文件。

<?php
// css.php

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

print file_get_contents("style.css");


关于php - 使用 PHP 的动态 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56548571/

相关文章:

css - dompdf 内部分页 : avoid on table not working

html - <a> 标签无效

php - MySql 查询错误

php - 如何在 Yii 中将日期设置为 NULL?

php - 为什么在这段代码中,html页面中的图片和文字也显示在弹出窗口中?[ PHTML ]

jquery - 切换时 Bootstrap 导航栏折叠是白色的

html - IE7 li 图像和文本问题 - 文本。快工作了

php - 通过 css 根据输入的 id 或标题显示图像

php - 如何从 MS Word (.DOC) 文件获取摘要信息?

css - Bootstrap - 不同网格前缀的不同 CSS 规则