css - 使用背景图像将 LESS Bootstrap mixin 添加到 body

Question

我正在尝试将背景图像与渐变 LESS Bootstrap 混合使用，但它不起作用，我已将所有 Bootstrap .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”文件夹中的 bootstrap gradients mixin 文件，我更改了 mixin 的名称并使用背景图像做了我自己的。像这样:

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;
}