【问题标题】:CSS transition between background image and background color背景图像和背景颜色之间的 CSS 过渡
【发布时间】:2023-03-10 07:09:01
【问题描述】:

我正在尝试在带有背景图像的面板上进行基本的缓出过渡。我希望它在悬停时淡出背景颜色。我尝试过使用各种不工作的转换。我试过了(我认为可行):

transition:background-image 0.2s ease-in-out;

.panel {
  width:200px;
  height:200px;
  background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
  transition:background-image 0.2s ease-in-out;
}
.panel:hover {
  background:#000;
  transition:background-image 0.2s ease-in-out;
}
<div class="panel"></div>

【问题讨论】:

    标签: css css-transitions


    【解决方案1】:

    您可以使用此代码:

    演示在这里:https://output.jsbin.com/yadiwoviwe

    .panel {
      position: relative;
      background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
      width:200px;
      height:200px;
      transition: background-color 0.2s ease-in-out;
    }
    .panel:hover {
      background-color: rgba(0,0,0,.5);
    }
    .panel:before {
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background-color: inherit;
      content: ' ';
    }
    

    【讨论】:

    • 这可行,但如果我想在面板 div 中添加任何文本内容,它也会淡出。
    【解决方案2】:

    很遗憾,您不能以这种方式进行

    原因是您正在尝试为 background-image 属性设置动画 - 一个不可动画的属性。

    相反,您可以使用一个很酷的小技巧,使用伪元素来创建背景图像:

    .panel {
      width: 200px;
      height: 200px;
      position: relative;
      background: pink;
    }
    
    .panel::after {
      content: "";
      position: absolute;
      pointer-events: none;
      background: url(https://unsplash.it/200) center center no-repeat;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      will-change: opacity;
      transition: opacity .1s ease-out;
    }
    
    .panel:hover::after {
      opacity: 0.5;
    }
    <div class="panel"></div>

    灵感来自 CSSTricks 上的 this cool little article

    【讨论】:

      【解决方案3】:

      或者,您可以控制图像的不透明度。

      .panel {
        width: 200px;
        height: 200px;
        background: #000;
        position: relative;
        color: white;
        text-align: center;
      }
      
      .panel:after {
        content: "";
        background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
        background-size: 200px 200px;
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
      }
      
      .panel:hover:after {
        opacity: 0;
      }
      <div class="panel"><h1>Text</h1></div>

      【讨论】:

        【解决方案4】:

        过时的答案,当前使用 CSS 的图像过渡。

        -webkit-transition: all 1s ease-out;  
        -moz-transition: all 1s ease-out;  
        -o-transition: all 1s ease-out;  
        transition: all 1s ease-out;  
        

        background-image 而不是“all”,你会看到的。

        【讨论】:

          猜你喜欢
          • 2014-07-22
          • 1970-01-01
          • 2012-01-01
          • 2021-08-13
          • 1970-01-01
          • 1970-01-01
          • 2017-01-29
          • 1970-01-01
          • 2015-04-05
          相关资源
          最近更新 更多