Question

我需要针对什么来改变Bootstrap 4的不透明度？我发现我需要将其定位为影响其背景，但是当我向工具提示内部或工具提示添加不透明度：1时，它什么都不做：

.tooltip .tooltip-inner {
  background-color: #014379;
}

.tooltip .arrow:before {
  border-top-color: #014379;
}

我需要做些什么来改变它？谢谢！

Answer 1

您可以像这样更改工具提示的不透明度

.tooltip.show {
    opacity: 0.5;
}

Answer 2

如果您尝试过尝试此代码

.tooltip.show /* The CSS classes that the tooltip has */ {
    opacity: 0.5; /* or whatever */
}

然后尝试添加!important，这样您就可以确定将应用您的样式

opacity: 0.5 !important;

如果仍然无法正常工作，请随时告诉我。

Answer 3

不透明度的值介于0和1之间.1根本没有任何变化，0表示不可见。

＆＃13;

.tooltip .tooltip-inner {
  background-color: #014379;
  opacity: 0.5;
}

.tooltip .arrow:before {
  border-top-color: #014379;
}

＆＃13;

<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    </script>
  </body>
</html>

＆＃13;

Answer 4

如果要更改背景颜色不透明度，可以使用rgba（）虽然它不适用于HEX颜色，除非你使用SCSS 这意味着如果你想要这个解决方案，你需要找到一个看起来像#014379但是带有rgb（）的颜色

RGBA示例：

/*Instead of 
background-color: #014379;
*/
background-color:rgba(XXX,XXX,XXX,0.5)

SCSS示例：

SCSS变量：

$color-tertiary: #607D8B;

改变不透明度：

background-color: rgba($color-tertiary, 0.5);

如何改变Bootstrap 4工具提示不透明度？

4 个答案: