LESS用mixin设置动态背景图像 [英] LESS css set dynamic background image with mixin

问题描述

我使用 LESS CSS 。

我目前正在使用Mixins和变量。

像这样的东西效果不错：

  .border-radius（@radius）{border-radius ：@radius; } 
 
 #header {.border-radius（4px）; } 
  

这是不是：

  .bg-img（@img）{background-image：url（@img）; } 
 
 #logo {.bg-img（../ images / logo.jpg）; } 
  

in the background-image：url （''）&（）但是它试图获取图像 images / @ img 无法调用未定义的方法charAt

我认为写 background-image：url（）所有的时间太过乏味，这是可能的吗？

它在我的情况下需要这样使用：
/>

  .bg-img（@img）{background-image：url（@ {img}）;} 
 
 #logo {.bg-img（../ images / logo.jpg）;} 
  

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..?

解决方案

:) 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"); }

这篇关于LESS用mixin设置动态背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！