使用背景图像将较少的Bootstrap混合添加到正文中

Question

我试图使用一个背景图像与渐变无引导混合，但它不工作，我已经导入所有的引导.less文件到一个style.less文件，其中我的theme.less被导入(这个文件)。每当我执行下面的grunt任务运行器时，都不会编译theme.less文件。我有这样的代码：

@base-url: '../img/backgrounds';

body {
  background: #gradient.directional(#333; #000; 45deg), url('@{base-url}/bus.jpg'), no-repeat center center fixed; /* fallback */
  background-size: cover;
  overflow-x: hidden;
}

我也试过了：

@base-url: '../img/backgrounds';

body {
  #gradient.directional(#333; #000; 45deg), url('@{base-url}/bus.jpg'), no-repeat center center fixed; /* fallback */
  background-size: cover;
  overflow-x: hidden;
}

在第二个示例中，编译器说我在第9行、第49列中缺少一个')‘

Answer 1

现在我得到了它，我需要做的就是修改" bootstrap /mixins/ gradients“文件夹中的引导渐变混入文件，我更改了混入的名称，并用背景图像做了我自己的混入。如下所示：

mymixins.less文件：

@base-url: '../img/backgrounds';

#gradient1 {
    .directional1(@start-color: rgba(255,255,255, 1); @end-color: rgba(0,0,0,1); @deg: 45deg) {
        background-repeat: repeat-x;
        background: -webkit-linear-gradient(@deg, @start-color, @end-color),url('@{base-url}/bus.jpg'), no-repeat center center fixed;  // Safari 5.1-6, Chrome 10+
        background: -o-linear-gradient(@deg, @start-color, @end-color), url('@{base-url}/bus.jpg'), no-repeat center center fixed; // Opera 12
        background: linear-gradient(@deg, @start-color, @end-color), url('@{base-url}/bus.jpg'), no-repeat center center fixed; // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    }
}

我的theme.less文件：

.background {
    #gradient1.directional1(rgba(255,255,255,0.3); rgba(0,0,0,0.3); 45deg);
    background-size: cover;
    overflow-x: hidden;
}