CSS淡入淡出过渡背景：线性渐变，不起作用

Question

一个简单的 html 元素，带有 CSS 背景线性渐变。

目标：悬停时淡化背景。不起作用（带有过渡背景），请参见下面的示例 - 为什么？

ui-accordion-header {
  border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

.mx-accordion h1 {
    background: linear-gradient(0deg, rgba(227,227,227,1) 20%, rgba(247,247,247,1) 100%);
    border: 1px solid #e3e3e3;
    border-width: 0 0 1px;
    color: #000;
    padding: 7px 10px;
    margin: 0px;
    
    transition: background .2s ease-in-out;
}

.mx-accordion h1:not(.ui-state-active):hover {
    background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
    cursor: pointer;
    color: #027BFF;
}

<div id="accordion" class="mx-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">


<h1 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <a href="#">My Text</a>
    </h1>
  
  </div>

Answer 1

不支持过渡渐变，如此处所述。

解决方法可能是过渡背景位置并缩放背景。这样我们就可以实现非常相似的目标。

div {
  background-image: linear-gradient(0deg, #e1ebff 0%, #e1ebff 25%, rgba(227, 227, 227, 1) 75%, rgba(247, 247, 247, 1) 100%);
  padding: 7px 10px;
  background-size: 100% 400%;
  background-position: 100% 0%;
  transition: .2s;
}

div:hover {
  background-position: 100% 100%;
}

<div>Lorem ipsum</div>

Answer 2

虽然渐变图像的过渡方式与背景颜色不同，但您可以过渡不透明度，当您提到淡入淡出时，这似乎就是您想要的。

当然，您不想改变整个元素的不透明度，因此此代码片段在元素之前和之后以伪方式添加两个背景，并转换这些元素的不透明度。

.ui-accordion-header {
  border: 0 none;
  font-size: 100%;
  line-height: 1.3;
  list-style: none outside none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  text-decoration: none;
}

.mx-accordion h1 {
  border: 1px solid #e3e3e3;
  border-width: 0 0 1px;
  color: #000;
  padding: 7px 10px;
  margin: 0px;
  position: relative;
}

.mx-accordion h1:not(.ui-state-active):hover {
  cursor: pointer;
  color: #027BFF;
}

.mx-accordion h1::before,
.mx-accordion h1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: -1;
  transition: opacity .2s ease-in-out;
}

.mx-accordion h1::before {
  background: linear-gradient(0deg, rgba(227, 227, 227, 1) 20%, rgba(247, 247, 247, 1) 100%);
  opacity: 1;
}

.mx-accordion h1:hover::before {
  opacity: 0;
}

.mx-accordion h1::after,
.mx-accordion h1:not(.ui-state-active)::after {
  background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
  opacity: 0;
}

.mx-accordion h1:not(.ui-state-active):hover::after {
  opacity: 1;
}

<div id="accordion" class="mx-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">


  <h1 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <a href="#">My Text</a>
  </h1>

</div>