Question

请帮忙，我在php文件中有一个渐变的CSS样式：

<?php
<head>
<style type="text/css">

.styleku-slidercontainer {
   background: #0a4999; /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhNDk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMmI2ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(top,  #0a4999 0%, #22b6f4 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a4999), color-stop(100%,#22b6f4)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #0a4999 0%,#22b6f4 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #0a4999 0%,#22b6f4 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #0a4999 0%,#22b6f4 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #0a4999 0%,#22b6f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a4999', endColorstr='#22b6f4',GradientType=0 ); /* IE6-8 */}

我想动态更改颜色1（#0a4999）和颜色2（#22b6f4），所以我创建了一些PHP代码：

.styleku-slidercontainer {
        /*background-color: #fff;*/

        background: <?php echo $smof_data['color_scheme_one']; ?>; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhNDk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMmI2ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

        background: -moz-linear-gradient(top, <?php echo $smof_data['color_scheme_one']; ?> 0%, <?php echo $smof_data['color_scheme_two']; ?> 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, <?php echo $smof_data['color_scheme_one']; ?>), color-stop(100%, <?php echo $smof_data['color_scheme_two']; ?>)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, <?php echo $smof_data['color_scheme_one']; ?> 0%, <?php echo $smof_data['color_scheme_two']; ?> 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, <?php echo $smof_data['color_scheme_one']; ?> 0%, <?php echo $smof_data['color_scheme_two']; ?> 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, <?php echo $smof_data['color_scheme_one']; ?> 0%, <?php echo $smof_data['color_scheme_two']; ?> 100%); /* IE10+ */
        background: linear-gradient(to bottom, <?php echo $smof_data['color_scheme_one']; ?> 0%, <?php echo $smof_data['color_scheme_two']; ?> 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="<?php echo $smof_data['color_scheme_one']; ?>", endColorstr="<?php echo $smof_data['color_scheme_two']; ?>",GradientType=0 ); /* IE6-8 */}

但是，只有第一种颜色显示（$smof_data['color_scheme_one']），而第二种颜色没有显示（$smof_data['color_scheme_two']）。

你可以告诉我我的错误吗？

谢谢。

Answer 1

对于php控制的CSS，你应该使用php样式表。

HTML文档负责人

<link rel='stylesheet' type='text/css' href='css/style.php' />

PHP样式表

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

   $brandColor = "#990000";
   $linkColor = "#555555";
   $CDNURL = "http://cdn.blahblah.net";
?>

#header {
   background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a {
  color: <?php echo $linkColor; ?>;
}

...

ul#main-nav li a {
  color: <?php echo $linkColor; ?>;
}

PHP CSS样式表教程http://css-tricks.com/css-variables-with-php/

Answer 2

如果你只想更改<head>中的部分CSS，最好不要在PHP中执行非动态CSS，我建议这样做：

<?php 
//some php in here - setting $color_variable1 = something; and $color_variable2 = something;
?>
<head>
  <style>
    .someClass{
      color: #fff;
      /* background-color: <?php if($condition) echo "#FFF"; else echo "#000"; ?>; */
      background: -moz-linear-gradient(top, <?php echo $color_variable1; ?> 0%, <?php echo $color_variable2; ?> 100%);
      border: 1px solid black;
    }
  </style>
<?php 
//another php maybe?
?>

编辑：如果您的“颜色阵列”中的第二种颜色完全没有显示，例如输出类似于background: ; - 这意味着该数组索引上没有任何内容 - empty($smof_data['color_scheme_two']); // would return true

确保您完成了某个任务： $smof_data['color_scheme_two'] = "someValue";

你的评论中的

EDIT2：看起来你正试图制作这个：

background: -moz-linear-gradient(top, <?php echo $color_variable1; ?> 0%, <?php echo $color_variable2; ?> 100%);

如何在php文件中混合php在css中？

2 个答案: