Question

我已经设置了渐变变量scss，但是深色并不是那么暗（很难看到它是渐变的）。

在哪里可以设置渐变色的对比度以使其更暗或更亮？也许有可变的东西。

$ enable-gradients true或false（默认），通过各种组件上的背景图像样式启用预定义的渐变。 https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

我的.scss：

$enable-gradients: true;

我的html：

<a href="/login" role="button" class="btn btn-dark mx-2 text-nowrap">Login</a>

评论：

我需要.scss解决方案来更改所有渐变，而不是特定的按钮或元素。

Answer 1

通过2个文件构建渐变：

第一个：https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_background.scss

@if $enable-gradients {
  @each $color, $value in $theme-colors {
    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
  }
}

第二个：https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_background-variant.scss

@mixin bg-gradient-variant($parent, $color) {
  #{$parent} {
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
  }
}

只需叠加这项工作...

如何在Bootstrap 4中更改渐变设置？

1 个答案: