LESS css 用 mixin 设置动态背景图片

发布于 2024-11-15 08:59:08 字数 627 浏览 3 评论 0原文

我正在使用 LESS CSS

我目前正在使用带有变量的 Mixin。

这样的东西可以正常工作:

.border-radius (@radius) { border-radius: @radius; }

#header { .border-radius(4px);  }

这是不是

.bg-img(@img) { background-image:url(@img); }

#logo { .bg-img("../images/logo.jpg"); }

我尝试过使用 ' & 的组合" 在 background-image:url ('') & ("") 中,但随后它尝试将图像获取为 images/@img 而不是图像名称否则它会给我一个错误
Cannot call method 'charAt' of undefined

我认为一直写 background-image:url() 太乏味了,这可能吗..?

I am using LESS CSS .

I am currently using Mixins with variables.

Something like this works okay :

.border-radius (@radius) { border-radius: @radius; }

#header { .border-radius(4px);  }

This is not :

.bg-img(@img) { background-image:url(@img); }

#logo { .bg-img("../images/logo.jpg"); }

i have tried combinations of using ' & " in the background-image:url ('') & ("") but then it tries to get the image as images/@img instead of the image name. other wise it gives me an error of
Cannot call method 'charAt' of undefined

I think writing background-image:url() all the time is too tedious, is this possible..?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

罪歌 2024-11-22 08:59:08

:) 得到了我的答案!

在我的例子中需要这样使用:

.bg-img(@img) { background-image:url("@{img}"); }

#logo { .bg-img("../images/logo.jpg"); }

:) got my answer!

it needs to be used like this in my case :

.bg-img(@img) { background-image:url("@{img}"); }

#logo { .bg-img("../images/logo.jpg"); }
长亭外,古道边 2024-11-22 08:59:08

您可以通过将图像路径的第一部分添加到初始 mixin 来进一步改进这一点,这样您只需编写一次:

.bg-img(@img) { background-image:url("../images/@{img}"); }

#logo { .bg-img("logo.jpg"); }

一个小的改进,但确实增加了一点优雅。

You can further improve on this by adding the first part of the image path to the initial mixin so you only have to write it once:

.bg-img(@img) { background-image:url("../images/@{img}"); }

#logo { .bg-img("logo.jpg"); }

A small improvement but does add a little elegance.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文