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

我正在设计一个经常使用CSS文件的网站，但是我有一些背景图片，列表中项目符号的图片，我可能会发现CSS

url（）

功能的另一个需求

但是，在cake中，所有URL都应该由

Route:：URL（）

函数以几种方式处理，最常见的是

$html->URL（）

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

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

div.coolbg{
背景图像：url（“”）；
}

请看，我的最后一个选项是在布局上内联导入css文件，以便对其进行解释。但我更喜欢使用更“蛋糕”的方法

---

谢谢

您可以通过在Apache中编辑.htaccess文件来添加CSS，以便通过PHP进行处理。处理它，而不是仅仅把它吐出来，确实会对性能造成轻微的影响

AddType application/x-httpd-php .css

---

另外，请参见：

除非您首先实例化蛋糕对象，否则这对蛋糕没有太大帮助。如果你想使用html助手，你可能想弄清楚第一个蛋糕对象是如何实例化的，然后在你的CSS中模仿它。我不确定该怎么做——我认为拥有一个完整的CSSController会有些过分，但我认为您可能必须实例化一个应用程序控制器（毕竟，您希望重写的css url反映您的应用程序设置，对吗？）。因此，我想您可能必须创建一个css控制器。

您不需要在css文件中使用$html->url（），因此您不需要通过PHP解析css文件或创建一个css控制器

如果您的cake应用程序安装在虚拟主机DocumentRoot中，只需从webroot将所有图像路径设置为绝对路径即可。e、 g

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

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

如果您的cake应用程序未安装在virtual hosts DocumentRoot中，即您通过URL（如）访问cake应用程序，那么您将创建相对于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目录中。

一大群cakephp专家可能会因为我提出这个建议而讨厌我：）

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

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

.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文件中，我只需输入：

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

---

糟糕的是，这显然不是最容易做的事。好的方面是，无论您是否使用花哨的url，它都会工作，因为css会找到与css文件相关的图像。

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

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

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

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

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

---

它可能不是最简单的解决方案，但它看起来不像cakephp提供的解决方案。

将带有

背景的行更改为

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

我发现在CakePHP的助手中嵌入CSS时，CSS中的相对URL会崩溃。这是因为路由器能够将不同的url映射到同一页面，因此相对url需要不同。例如，如果您的url类似于localhost/myapp/parts/index或localhost/myapp/parts/或localhost/myapp/parts，则相对url../img/image.gif仅适用于其中一个url

在我的助手中，我发现绕过它的唯一方法是使我的css像这样

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

.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>";

$map=array(
“\uuuu-loader\u-image\uuuuu'=>this->Html->assetUrl（'ajax-loader.gif'，array（'pathPrefix'=>IMAGES\u-URL））
);
$formatted_css=strtr（$this->css，$map）；
$response.=''$格式化的css。"";

如果有更简单的方法，我将非常感谢您的评论。
如果我不使用该框架，这将起作用。CakePHP中的Helpers、元素和其他所有内容都不会出现在会话中，因为我将直接请求一个PHP文件。在控制器/视图中插入所有CSS会有所帮助，但我仍然认为这超出了Cake的范围！好吧，我完全不同意绝对路径，因为它不够通用，不能在几个场景中工作，但我将采用相对的解决方案，因为我要求使用“蛋糕方式”，没有什么比蛋糕在它自己的CSS文件中的方式更好的了。谢谢