Question

我将多个CSS文件合并为一个（CSS文件的层次结构是变体），因此我需要将CSS文件中的相对URL转换为绝对URL。

以下是要求;

CSS file URL: http://example.com/template/default/css/style.css
Domain: http://example.com

输入

#test {
    background:url(../images/test.jpg);
    background:url( 'test.jpg' );
    background:url("../../common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

必需的输出

#test {
    background:url(http://example.com/template/default/images/test.jpg);
    background:url( 'http://example.com/template/default/css/test.jpg' );
    background:url("http://example.com/template/common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

请注意相对路径的../和../../。

我尝试了preg_replace() regex to match relative url() paths in CSS files的类似解决方案，但这种解决方案与众不同，我无法让它适应我的情况。

提前感谢您的帮助。

Answer 1

解决方案非常简单。如果您要在HTML网页上加载任何文件，图片等，必须使用/，以便任何网址都为domain.com/URL。

你的CSS应该是：

#test {
    background:url(/test.jpg);
    background:url(/template/default/images/test.jpg);
}

这适用于任何文件：CSS，JS文件，<a>标记中的链接等

修改

所以，你必须使用php来做到这一点。我建议你创建自己的函数/类来读取文件的根路径（这里是http://example.com/template/default/css/），然后爆炸你给出的路径，如果你回忆..回去一个文件夹（删除）在这种情况下为css/）并添加不是..的其他部分。

非常简单直接。

正则表达式将相对URL转换为CSS中的绝对URL

1 个答案: