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

StackOverflow https://stackoverflow.com/questions/512556

题

我经常使用 CSS 文件设计一个网站，但我在列表中多次出现背景图像、项目符号图像，我可能会发现 css 的另一个需求 url() 功能。

但是，在 cake 中，所有 URL 都应该由 Route::url() 功能，以多种方式，最常见的是 $html->url()

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

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

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

谢谢！

有帮助吗？

解决方案

您不需要在你的CSS文件中使用$ HTML的“网址（），因此你不需要通过PHP解析CSS文件或创建CssController。

如果你的蛋糕的应用程序安装在您的虚拟主机的DocumentRoot，才使所有的路径，从根目录绝对图像。 e.g。

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

这将在应用程序/根目录/ IMG / coolbg.jpg应用映像到您的

如果你的蛋糕应用程序未安装在虚拟主机的DocumentRoot，也就是说，你通过URL访问你的蛋糕应用如 http://www.domain.com/myapp/ ，那么你做的路径相对于CSS文件的图像。退房样式规则在app / Webroot公司/ CSS / cake.generic.css e.g。

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

这工作，因为样式表活在应用程序/ Web根目录/ CSS /目录，图像住在app / Webroot公司/ IMG /目录下，这样的路径“../img/cake.icon.gif”上来了的CSS的目录，然后回落到IMG目录。

其他提示

我肯定会去通过zam3858建议的解决方案。如果你不喜欢在两个不同位置您的图像，创建指向图像的CSS目录的符号链接。像这样：

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

现在，图像路径将被正确两者的HTML辅助和样式表解决：

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

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

有可能不是cakiest解决方案，但它并不像CakePHP提供了一个。

更改与background行至

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

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

AddType application/x-httpd-php .css

此外，见： http://www.webmasterworld.com/forum88/5648.htm

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

CakePHP的专家组成的一大堆很可能会恨我建议这一个..：）

对我来说，最简单的解决办法是只包括在CSS文件夹中的图像文件。像这样

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

所以在css文件我只想把在：

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

坏事显然它不是做cakiest事情。好事是它会成功，无论如果你正在使用花哨的URL或不因为CSS发现相对于css文件的图像。

我发现，在CSS下降相对URL在CakePHP的一个辅助嵌入CSS分开时。这是因为路由器能够不同的URL映射到同一个页面，以便那么相对URL需要是不同的。例如，如果你有一个像本地主机/ MYAPP /零件/索引或本地主机/ MYAPP /零件/或本地主机/ MyApp的/部分则URL ../img/image.gif的相对URL将只为他们的工作之一。

在我的帮助，我发现要解决它的唯一办法就是让我的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;

}

，然后与在代码中生成的URL输出之前的CSS替换该标签。

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

如果有一个更简单的方式来做到这一点，我将不胜感激评论。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top