时间戳

首页 > 解决方案 > 如何更改 Bootstrap 4 中的渐变设置？

css - 如何更改 Bootstrap 4 中的渐变设置？

问题描述

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

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

$enable-gradients true 或 false （默认）通过各种组件上的 >background-image 样式启用预定义的渐变。 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 解决方案来更改所有渐变，而不是特定的按钮或元素。

标签： csstwitter-bootstrap

解决方案

渐变是通过 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;
  }
}

只是不得不超越这份工作......

推荐阅读