css中损坏的php变量 - 颜色问题

【问题标题】：corrupted php variable in css - color issuecss中损坏的php变量 - 颜色问题
【发布时间】：2016-04-09 05:15:01
【问题描述】：

这就是我想要做的。根据当前的季节，我希望在我的 css 中使用不同的颜色。此外，根据当前的白天，我希望稍微改变颜色的亮度。 这就是以下代码的作用：

<?php
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date("n"); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros

if($month > 11 || $month <= 2) {
    $color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
    $color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
    $color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
    $color = "#97743a"; //Autumn
}

$brightness = (abs(12 - $hour))*-0.055;

$currentColor = color_luminance($color, $brightness);

function color_luminance( $hex, $percent ) {

    // validate hex string
    $hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
    $new_hex = '#';

    if ( strlen( $hex ) < 6 ) {
        $hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
    }

    // convert to decimal and change luminosity
    for ($i = 0; $i < 3; $i++) {
        $dec = hexdec( substr( $hex, $i*2, 2 ) );
        $dec = min( max( 0, $dec + $dec * $percent ), 255 ); 
        $new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
    }
    return $new_hex;
}
?>

我将 php 文件包含在两个文件中：style.php 和 header.php。

style.php:

<?php   
header("Content-type: text/css");

include 'color.php'; // include color.php file to have access to $currentColor
$highlight = $currentColor;
$white = '#fff';
?>

/*
Theme Name: Portfolio
Description: Template for my online portfolio
Author: Markus Lorenz Schilling
Author URI: http://malosch.com
*/



/********** NON-RESPONSIVE **********/

/* General structure */
* { margin: 0; padding: 0; color: #333; }
html, body { font-family: 'bariol_regular'; font-size: 18px; background-color: #efefef; overflow-x: hidden; }
.clear { clear: both; }
.header { height: auto; } /* header including the colored line + respsonsive menu button + hex color code */
#headerLine { height: 1px; width: 100%; background-color:<?=$highlight?>; } /* colored line on top of page */
.main { float: left; max-width: 926px; }
#footer p { margin: 16px 0 32px; color: #999; float:left; }

/* Headings */
h1 { font-family: 'bariol_bold'; font-size: 21px; margin: 16px 0 32px; }
h2 { font-family: 'bariol_regular'; font-size: 21px; margin-bottom: 32px; }
h3 { font-family: 'bariol_light'; font-size: 21px; margin: 32px 0 24px 0; color: <?=$highlight?>; border-style: solid; border-width: 1px 0 0 0; padding: 8px 0 0 0; } /* color needed for h3 on publication page */

/* Navigation panel */
.pushy { background: <?=$highlight?>; } /* pushy (mobile navigation) background */
ul { list-style-type: none; }

/* Links */
a { font-family: 'bariol_bold_italic'; text-decoration:underline; }
a:hover { color:<?=$highlight?>; }
a:visited { font-family: 'bariol_bold_italic'; text-decoration:underline; }

/* Colors */
.highlightColor { color:<?=$highlight?>; }
.white { color: <?=$white?>; }

/* Project links */
.featureImg { width:100%; height: 176px; overflow:hidden; position:relative; margin: 0 0 8px 0; display: inline-block; }
.featureImg img { width: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.featureImgBackup { width: 100%; height: 176px; background: <?=$highlight?>; }
.mask { background-color:<?=$highlight?>; display: table; width: calc(100% - 32px); height: 144px; padding:16px; float: left; position: absolute; left: 0px; top: 0px; opacity: 0; text-align: center; transition: opacity .5s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.mask:hover { opacity: 1; }
.mask span { color: #fff; font-size: 21px; text-decoration: underline; display: table-cell; vertical-align: middle; }
.excerpt { padding-right: 16px; }

/* Project page */
.project_description { max-width: 100%; margin: 0 0 16px 0; float: left; }
.project_quote { text-align: center; float: left; width: 100%; border: 1px; border-color: <?=$highlight?>; color: <?=$highlight?>; margin: 16px 0 32px 0; border-style: solid none; padding: 16px; font-size: 24px; font-family: 'bariol_bold_italic'; }
.date { width: 298px; float: left; margin: 0 0 16px 0; }

/* Images */
img { vertical-align: top; max-width: 100%; height: auto; margin: 0 0 16px 0; float: left; } /* scale images to width of content but never larger than their actual size */
#contact img { margin: 0; }
.size-full { margin: 0 0 16px 0; max-width: 100%; }

/* 404 */
#DouglasAdams { text-align: center; }
.reload { cursor: pointer; }

/* About */
#contact { width:298px; float:left; margin: 0 0 32px 0; }
#profilePic { max-width: 926px; height: 320px; margin: 0 0 32px 0; background-image: url("assets/profilePic/profilePic.jpg"); background-position: center center; }
#bio { width: 100%; margin: 0 0 48px 0; }
#contact { width: 100%; margin: 0 0 32px 0; }

/* Videos */
iframe { margin-bottom: 16px; }

/* Publications */
.csl-bib-body { padding-left: 0 !important; text-indent: 0 !important; line-height: normal !important; }



/********** RESPONSIVE **********/

/* Basic responsive settings */
ul a { font-family: 'bariol_light'; font-size: 29px; line-height: 35px; text-decoration: none; text-transform: lowercase; } /* Links in navigation panel*/
ul a:hover { font-family: 'bariol_regular'; text-decoration: none; }
ul a:visited { text-decoration: none; }
.current_page_item a { font-family: 'bariol_regular'; }
.menu-btn { background-color:<?=$highlight?>; cursor: pointer; padding: 3px 8px 5px; color: #fff; margin: 24px 0 32px; }
.featureProject { margin: 0 0 32px 0; float: left; }
#sidebar_menu { width: 298px; padding: 0 16px 0 0; float: left; }
#container { margin: 0 auto; text-align: left; overflow: hidden; } /* need overflow: hidden; to avoid Google Chrome bug. See - http://stackoverflow.com/questions/15550205/strange-rendering-issue-in-chrome-with-floats-in-a-div-with-margin-top */
#currentColor { float: right; }

/* Mobile */
ul a { color: <?=$white?>; }
ul a:hover { color: <?=$white?>; }
ul a:visited { color: <?=$white?>; }
.current_page_item a { color:<?=$white?>; }
.current_page_item a:hover { color:<?=$white?>; }
.current_page_item a:visited { color:<?=$white?>; }
.menu-btn { display: inline-block; }
.featureProject { width: 100%; }
#sidebar_menu { display: none; }
#container { max-width: 926px; padding: 0 16px; }
#currentColor { margin-top: 27px; }

/* tablets - portrait */
@media screen and (min-width: 644px) {
.featureProject { width: 50%; }
}

/* tablets - landscape */
@media screen and (min-width: 958px) { 
.featureProject { width: 33.3%; }
}

/* desktops*/
@media screen and (min-width: 1272px) {
/* Navigation panel */
ul a { color: <?=$highlight?>; }
ul a:hover { color:<?=$highlight?>; }
ul a:visited { color: <?=$highlight?>; }
.current_page_item a { color:<?=$highlight?>; }
.current_page_item a:hover { color:<?=$highlight?>; }
.current_page_item a:visited { color:<?=$highlight?>; }
.menu-btn { display: none; }
.featureProject { width: 33.3%; }
#sidebar_menu { display: inline; }
#container { width: 1240px; max-width: initial; padding: 0; }
#currentColor { margin-top: 16px; }
}

/* @font-face shannanigens */
@font-face {
    font-family: 'bariol_bold';
    src: url('assets/fonts/bariol_bold-webfont.eot');
    src: url('assets/fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_bold-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_bold-webfont.woff') format('woff'),
         url('assets/fonts/bariol_bold-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_light';
    src: url('assets/fonts/bariol_light-webfont.eot');
    src: url('assets/fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_light-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_light-webfont.woff') format('woff'),
         url('assets/fonts/bariol_light-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_regular';
    src: url('assets/fonts/bariol_regular-webfont.eot');
    src: url('assets/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_regular-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_regular-webfont.woff') format('woff'),
         url('assets/fonts/bariol_regular-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_thin';
    src: url('assets/fonts/bariol_thin-webfont.eot');
    src: url('assets/fonts/bariol_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_thin-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_thin-webfont.woff') format('woff'),
         url('assets/fonts/bariol_thin-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_thin-webfont.svg#bariolthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bariol_bold_italic';
    src: url('assets/fonts/bariol_bold_italic-webfont.eot');
    src: url('assets/fonts/bariol_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_bold_italic-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_bold_italic-webfont.woff') format('woff'),
         url('assets/fonts/bariol_bold_italic-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_bold_italic-webfont.svg#bariol_boldbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bariol_regular_italic';
    src: url('assets/fonts/bariol_regular_italic-webfont.eot');
    src: url('assets/fonts/bariol_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/bariol_regular_italic-webfont.woff2') format('woff2'),
         url('assets/fonts/bariol_regular_italic-webfont.woff') format('woff'),
         url('assets/fonts/bariol_regular_italic-webfont.ttf') format('truetype'),
         url('assets/fonts/bariol_regular_italic-webfont.svg#bariolregular_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

header.php

<html>
    <head>
        <meta name="viewport" content="width=device-width" />

        <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title> <!-- Text displayed in tab -->

         <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.php" type="text/css" media="screen" /> <!-- Link to theme css -->
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/pushy.css" type="text/css" media="screen" /> <!-- Link to pushy css -->
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/hover.css" rel="stylesheet" media="all"> <!-- Link to hover css -->
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Pingback -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- jQuery -->

        <?php wp_head(); ?> <!-- Necessary wp header hook -->
    </head>
    <body>

        <nav class="pushy pushy-left"> <!-- Pushy Menu -->
            <h1><span class="white" id="pushyGreeting">Hello!</span></h1>
            <ul>
                <?php wp_list_pages('sort_column=menu_order&title_li='); ?> <!-- List all WP pages in a list -->
            </ul>
        </nav>

        <div class="site-overlay"></div> <!-- Site overlay when responsive menu is open -->

        <div id="headerLine"></div> <!-- Colored line at top of window -->

        <div id="container"> <!-- Container aka "wrapper" (needs to be named '#container' for pushy menu to work -->
            <div class="header">
                <div class="menu-btn">&#9776; Menu</div> <!-- Menu Button -->
                <p class="highlightColor" id="currentColor"><?php include 'color.php'; echo $currentColor; ?></p> <!-- Include color.php file in header.php to have access to the current color value -->
                <br class="clear">
            </div><!-- header -->

在样式表中，我使用颜色作为突出显示颜色（悬停效果、突出显示等）。在 header.php 中，我只是显示值让人们知道，此时我的网站上正在使用什么突出显示颜色。

这是我网站顶部的截图：

现在这是我的问题： 如您所见，右上角显示颜色 (#890044) 但使用的突出显示颜色不同 (#610030)。检查工具确认使用了两个不同的值。

有趣的是，css 文件甚至没有使用我的 php 中的起始颜色：#920049 或 #e05038 或 #729f98 或#97743a。它开始处理颜色，但似乎还没有完成。但同样，header.php 正确显示颜色。

这是否意味着 css 文件能够在其函数完成之前从 php 文件中获取值？如果是这样，我该如何防止这种情况发生？ 注意：为了让它更加混乱，我的本地 WordPress 安装 - 具有完全相同的文件 - 工作得很好。完全没有颜色问题。

非常感谢您对此问题的任何帮助 - 谢谢！

编辑： 我测试了以下建议，但到目前为止我没有运气。 - 检查我是否不小心在文件中多次包含 color.php（不是这种情况） - 更改了没有做任何事情的变量名 -

谁能帮忙？我真的想不出任何我可以尝试解决的问题，因为我不太适合 php...

【问题讨论】：

  • 你不能在css文件中使用php怎么是没有错误的错误！！！尝试在 header.php 文件上使用相同的逻辑
  • @saurabhkamble 您可以在 css 文件中使用 php - 在这里查看 :) barelyfitz.com/projects/csscolor
  • 没有包含 php 的 css 文件，它的反向 php 可以包含 css，因为 php 是服务器端和 css 客户端检查正确的流程@malosch....
  • 从#890044 到#610030 的变化似乎不是随机的。在测试您的color.php 代码后（通过用简单的for 循环替换$hour 并输出十六进制），您的color_luminance() 函数似乎正在使用不同的$hour 参数调用，因为2 个十六进制值是 5 小时（分别为 13 - 18 小时）。发生这种情况的原因是什么，我不确定...
  • @ImClarky 会不会是一个在本地执行而另一个在服务器上执行？因为我一次从 css 和一次从 header.php 包含 color.php？

标签： php css wordpress colors include


【解决方案1】：

好的，我找到了答案。 在使用日期功能之前，我必须设置默认时区。类似date_default_timezone_set("America/Chicago");

现在我的 color.php 代码如下所示

<?php
date_default_timezone_set("America/Vancouver");
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date('n'); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date('G'); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
$base = 12;
$multiplier = -0.055;

if($month > 11 || $month <= 2) {
    $color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
    $color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
    $color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
    $color = "#97743a"; //Autumn
}

$brightness = $base - $hour;
$brightness = abs($brightness);
$brightness = $brightness * $multiplier;

$currentColor = color_luminance($color, $brightness); // if I change $brightness with a number (e.g 0.5) everything works
//$currentColor = $color;

function color_luminance( $hex, $percent ) {

    // validate hex string
    $hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
    $new_hex = '#';

    if ( strlen( $hex ) < 6 ) {
        $hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
    }

    // convert to decimal and change luminosity
    for ($i = 0; $i < 3; $i++) {
        $dec = hexdec( substr( $hex, $i*2, 2 ) );
        $dec = min( max( 0, $dec + $dec * $percent ), 255 ); 
        $new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
    }

    return $new_hex;
}
?>

更多信息可以在这里找到 PHP date() produces different results with same timestamp 和这里 http://php.net/manual/en/function.date-default-timezone-set.php

【讨论】：

    【解决方案2】：

    经过一些测试，我发现 $hour 变量导致了色差。只要我将 $hour 更改为 0-23 内的任何数字

    $brightness = (abs(12 - $hour))*-0.055;

    HTML 和 CSS 都显示相同的颜色代码。出于某种原因，当我通过日期函数计算当前小时时，我的代码不喜欢。

    $hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros

    但它不会给我一个语法错误。它可以运行，但 HTML 和 CSS 使用两种不同的颜色代码。

    有人知道为什么吗？

    【讨论】：

      【解决方案3】：

      检查你是否多次调用colors.php，我已经测试了这里的代码并且工作正常。

      编辑帖子并放置完整代码以进行更深入的分析。

      【讨论】：

      • 我只在 header.php 和 style.php 中包含 color.php。并且在每个文件中只有一次。将编辑帖子以在一秒钟内显示完整的代码。
      • 我已经再次测试并在这里正常工作，出于测试目的，请将变量“$currentColor”的名称更改为“$currentColorTestAB”。
      • 另外，你是在本地运行代码吗？因为在我的本地安装上它也可以正常运行。
      • 更改变量名没有任何作用。
      猜你喜欢
      • 2020-10-17
      • 1970-01-01
      • 2018-01-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-30
      • 2011-04-08
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode