Question

我正在使用CSS文件设计一个网站很多，但我有几次背景图片，列表中的项目符号图片，我可能会发现另外需要css url()函数。

但是，在蛋糕中，所有网址都应由Route::url()函数处理，以多种方式处理，最常见的是$html->url()

但我的问题是PHP文件不是由PHP解释的。如何创建包含以下内容的CSS文件：

div.coolbg {
  background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}

请参阅，我的最后一个选项是在布局上内联导入css文件，以便可以解释它。但我更喜欢使用更“蛋糕”的方式。

谢谢！

Answer 1

您不需要在css文件中使用$ html-＆gt; url（），因此您不需要通过PHP解析CSS文件或创建CssController。

如果您的蛋糕应用程序已安装在虚拟主机DocumentRoot中，则只需从webroot创建映像的所有路径。 e.g。

div.coolbg {
  background-image: url(/img/coolbg.jpg);
}

这会将app / webroot / img / coolbg.jpg上的图片应用到您的

如果您的蛋糕应用程序未安装在虚拟主机DocumentRoot中，即您通过http://www.domain.com/myapp/之类的URL访问蛋糕应用程序，则会创建相对于css文件的图像路径。查看app / webroot / css / cake.generic.css中的样式规则，例如

#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}

这是因为样式表存在于app / webroot / css /目录中，而图像存在于app / webroot / img /目录中，因此路径“../img/cake.icon.gif”出现了的css目录，然后返回到img目录。

Answer 2

我肯定会选择zam3858建议的解决方案。如果您不希望将图像放在两个不同的位置，请在css目录中创建指向图像的符号链接。像这样：

$ cd app/webroot/css 
$ ln -s ../img .

现在，将为html助手和样式表正确解析图像路径：

// css:
url(img/image.png);

// view.ctp
echo $html->image('image.png');

它可能不是最常用的解决方案，但它看起来并不像cakephp提供的那样。

Answer 3

将background更改为

background:url(../img/menu_027_l.jpg) no-repeat left;

Answer 4

您可以通过在Apache中编辑.htaccess文件来添加要通过PHP处理的CSS。处理它，而不是只是吐出它确实会有轻微的性能损失。

AddType application/x-httpd-php .css

另请参阅：http://www.webmasterworld.com/forum88/5648.htm

Answer 5

除非你首先实例化Cake对象，否则这对Cake的东西没有多大帮助。如果你想使用html帮助器，你可能想要弄清楚第一个Cake对象是如何实例化的，然后在你的CSS中模仿它。不确定我是怎么做到的 - 我认为拥有一个完整的CSSController会有点矫枉过正，但我认为你可能需要实例化一个app控制器（毕竟，你想要重写的css url来反映你应用的设置，对吧？）。所以我想你可能不得不创建一个CSSController。

Answer 6

一大堆蛋糕专家可能会讨厌我提出这个......：）

对我来说最简单的解决方案是将图像文件包含在css文件夹中。像这样的东西

/app/webroot/css/css_images/mypic.jpg

所以在css文件中我会输入：

background-image: url(css_images/mypic.jpg);

显而易见，这不是最棘手的事情。好的一点是，无论你是否使用花哨的网址都可以使用，因为css会找到相对于css文件的图像。

Answer 7

我发现在将CSS嵌入CakePHP的助手中时，CSS中的相对URL会崩溃。这是由于路由器能够将不同的URL映射到同一页面，因此相对URL需要不同。例如，如果你有一个像localhost / myapp / parts / index或localhost / myapp / parts /或localhost / myapp / parts这样的网址，那么../img/image.gif的相对网址只适用于其中一个。< / p>

在我的助手中，我找到解决问题的唯一方法就是让我的css像这样

.jquery-dialog-spinner {
    display:    none;
    position:   fixed;
    z-index:    1010;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .1 ) 
            url('__loader_image__') 
            50% 50% 
            no-repeat;

}

然后在输出css之前用代码中生成的url替换标记。

  $map = array(
      '__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL))
  );
  $formatted_css = strtr($this->css, $map);
  $response .= "<style type=\"text/css\">" . $formatted_css . "</style>";

如果有更简单的方法，我会很感激评论。

如何在CakePHP中的CSS文件中处理URL，以便它们引用正确的位置？

7 个答案: