9

我正在设计一个使用 CSS 文件的网站，但我在列表中有几次背景图像、项目符号图像，我可能会发现另一个对 cssurl()函数的需求。

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

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

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

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

谢谢！

4

7 回答 7

26

您不需要在 css 文件中使用 $html->url()，因此您不需要通过 PHP 解析 CSS 文件或创建 CssController。

如果您的蛋糕应用程序安装在您的虚拟主机 DocumentRoot 中，只需将所有图像路径设置为来自 webroot 的绝对路径。例如

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 目录。

于 2009-02-04T20:13:17.010 回答
1

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

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

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

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

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

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

于 2009-11-04T21:28:27.903 回答
1

将行更改background为

background:url(../img/menu_027_l.jpg) no-repeat left;
于 2010-11-13T20:32:56.173 回答
0

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

AddType application/x-httpd-php .css

另见：http ://www.webmasterworld.com/forum88/5648.htm

于 2009-02-04T18:10:44.293 回答
0

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

于 2009-02-04T19:18:51.487 回答
0

一大堆 cakephp 专家可能会因为我建议这个而讨厌我.. :)

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

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

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

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

糟糕的是，这显然不是最容易做的事情。好消息是，无论您是否使用花哨的 url，它都会起作用，因为 css 会找到相对于 css 文件的图像。

于 2009-02-11T09:43:06.670 回答
0

我发现在将 CSS 嵌入到 CakePHP 的帮助器中时，CSS 中的相对 URL 会分崩离析。这是由于路由器能够将不同的 url 映射到同一页面，因此相对 url 需要不同。例如，如果您有一个 localhost/myapp/parts/index 或 localhost/myapp/parts/ 或 localhost/myapp/parts 之类的 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;

}

然后在输出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>";

如果有更简单的方法可以做到这一点，我将不胜感激。

于 2012-10-26T16:20:12.360 回答