CakePHP 中的 CSS 文件中的 URL 是如何处理的，以便它们引用正确的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/512556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How are URLs handled inside the CSS file in CakePHP so they reference the correct location?
提问by Fernando Barrocal
I am designing a website using CSS Files a lot, but I have several occurrences of background images, images for bullets in lists and I will probably find another need for the css url()function.
我正在设计一个经常使用 CSS 文件的网站，但是我多次出现了背景图像、列表中的项目符号图像，而且我可能会发现对 cssurl()功能的另一个需求。
But, in cake, all URL should be handled by the Route::url()function, in several ways, being most common the $html->url()
但是，总而言之，所有 URL 都应该由Route::url()函数以多种方式处理，最常见的是$html->url()
But my problem is that CSS Files are not interpreted by PHP. How I can create a CSS File containing something like:
但我的问题是 PHP 不解释 CSS 文件。我如何创建一个包含以下内容的 CSS 文件：
div.coolbg {
background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}
See, my last option is to import the css file inline on the layout so it can be interpreted. But I highly prefer to use a more "Cake" approach.
看，我的最后一个选择是在布局上内联导入 css 文件，以便可以解释它。但我更喜欢使用更“蛋糕”的方法。
Thanks!
谢谢！
回答by neilcrookes
You don't need to use $html->url() in your css file, consequently you don't need to parse the CSS files through PHP or create a CssController.
您不需要在 css 文件中使用 $html->url()，因此您不需要通过 PHP 解析 CSS 文件或创建一个 CssController。
If your cake app is installed in your virtual hosts DocumentRoot, just make all the paths to images absolute from the webroot. e.g.
如果您的蛋糕应用程序安装在您的虚拟主机 DocumentRoot 中，只需将所有图像路径从 webroot 设为绝对路径。例如
div.coolbg {
background-image: url(/img/coolbg.jpg);
}
This will apply the image at app/webroot/img/coolbg.jpg to your
这会将 app/webroot/img/coolbg.jpg 中的图像应用到您的
If your cake app is not installed in the virtual hosts DocumentRoot, i.e. you access your cake app via a URL like http://www.domain.com/myapp/, then you make the path to the image relative to the css file. Check out the style rules in app/webroot/css/cake.generic.css e.g.
如果您的蛋糕应用程序未安装在虚拟主机 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;
}
This works because style sheets live in the app/webroot/css/ directory, and image live in the app/webroot/img/ directory, so the path "../img/cake.icon.gif" comes up out of the css directory, then back down into the img directory.
这是有效的，因为样式表位于 app/webroot/css/ 目录中，而图像位于 app/webroot/img/ 目录中，因此路径“../img/cake.icon.gif”从 css 中出现目录，然后返回到 img 目录。
回答by Bram
I would definately go for the solution suggested by zam3858. And if you don't like to have your images in two distinct locations, create a symbolic link in the css directory that points to the images. Like this:
我肯定会选择zam3858建议的解决方案。如果您不喜欢将图像放在两个不同的位置，请在 css 目录中创建一个指向图像的符号链接。像这样：
$ cd app/webroot/css
$ ln -s ../img .
Now, the image paths will be resolved correctly for both the html helper and style sheets:
现在，将正确解析 html 帮助程序和样式表的图像路径：
// css:
url(img/image.png);
// view.ctp
echo $html->image('image.png');
It may not be the cakiest solution, but it doesn't look like cakephp provides one.
它可能不是最好的解决方案，但它看起来不像 cakephp 提供的那样。
回答by Anders
Change the line with backgroundto
将行更改background为
background:url(../img/menu_027_l.jpg) no-repeat left;
回答by Matt
I found that relative urls in CSS fall apart when embedding CSS in a helper for CakePHP. It is due to the router being able to map different urls to the same page so then the relative url needs to be different. For example if you have a url like localhost/myapp/parts/index or localhost/myapp/parts/ or localhost/myapp/parts then a relative url of ../img/image.gif will only work for one of them.
我发现在 CakePHP 的帮助器中嵌入 CSS 时，CSS 中的相对 url 会崩溃。这是由于路由器能够将不同的 url 映射到同一页面，因此相对 url 需要不同。例如，如果您有一个像 localhost/myapp/parts/index 或 localhost/myapp/parts/ 或 localhost/myapp/parts 这样的 url，那么 ../img/image.gif 的相对 url 将仅适用于其中之一。
In my helper the only way I found to get around it was to make my css like this
在我的助手中，我发现绕过它的唯一方法是让我的 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;
}
}
and then replace the tag with a generated url in the code before output the css.
然后在输出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>";
If there is an easier way to do this I would appreciate a comment.
如果有更简单的方法可以做到这一点，我将不胜感激。
回答by Diodeus - James MacFarlane
You can add CSS to be processed through PHP by editing your .htaccess file in Apache. Processing it, as opposed to just spitting it out does have a slight performance hit.
您可以通过在 Apache 中编辑 .htaccess 文件来添加要通过 PHP 处理的 CSS。处理它，而不是仅仅吐出它确实会对性能造成轻微的影响。
AddType application/x-httpd-php .css
回答by Travis Leleu
This won't help too much with the Cake stuff unless you first instantiate the Cake objects. If you want to use the html helper, you'll probably want to figure out how the first Cake object is instantiated, then mimic that in your CSS stuff. Not sure exactly how I'd do this -- I think having an entire CSSController would be overkill, but I think you might have to instantiate an app controller (after all, you want the rewritten css url to reflect you app's settings, right?). So I guess you may have to create a CSSController anyways.
除非您首先实例化 Cake 对象，否则这对 Cake 内容没有太大帮助。如果你想使用 html helper，你可能想弄清楚第一个 Cake 对象是如何实例化的，然后在你的 CSS 内容中模仿它。不确定我是如何做到这一点的——我认为拥有一个完整的 CSSController 会有点矫枉过正，但我认为您可能需要实例化一个应用程序控制器（毕竟，您希望重写的 css url 来反映您的应用程序设置，对吗？ ）。所以我想你可能不得不创建一个 CSSController 反正。
回答by Travis Leleu
A whole bunch of cakephp experts are probably going to hate me for suggesting this one.. :)
一大群 cakephp 专家可能会讨厌我推荐这个.. :)
The easiest solution for me was to just include the image file in the css folder. Something like this
对我来说最简单的解决方案是将图像文件包含在 css 文件夹中。像这样的东西
/app/webroot/css/css_images/mypic.jpg
So in the css file I would just put in:
所以在 css 文件中，我只需要输入：
background-image: url(css_images/mypic.jpg);
The bad thing is obviously it's not the cakiest thing to do. The good thing is that it will work regardless if you are using fancy url or not since css finds the image relative to the css file.
坏事显然不是最糟糕的事情。好消息是，无论您是否使用花哨的 url，它都可以工作，因为 css 会找到相对于 css 文件的图像。
