CSS3背景图片过渡

121

我正在尝试使用CSS过渡创建“淡入淡出”效果。但是我不能让它与背景图像一起使用...

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

看看：http : //jsfiddle.net/AK3La/

css  background  background-image  css-transitions 
— 尼克·扎尼（Nick Zani）
source

Answers:

104

您可以过渡background-image。在img元素上使用以下CSS ：

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

Chrome，Opera和Safari本身支持此功能。Firefox尚未实现（bugzil.la）。不确定IE。

— 横街
source
105
background-image不是可设置动画的属性（w3.org/TR/css3-transitions/#animatable-properties），因此您的解决方案不符合标准。
— TLindig
12
这不是解决方案-FF和IE不支持它，如上所述，这不是规范应支持的属性。
— 2014年
另请参见以了解Fx的最新开发情况：bugzilla.mozilla.org/show_bug.cgi?id=546052
— Volker E.
2
@TLindig它应该是一个可动画的属性。
3
animatable属性为background，这是应该使用的属性（对我来说，它在Chrome中有效）。自问题发布以来，规格（或展示次数）可能已更改
— fps
37

解决方案（我自己找到）是一个忍者把戏，我可以为您提供两种方法：

首先，您需要为制作一个“容器” <img>，它将同时包含正常和悬停状态：

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

基本上，你需要隐藏的“正常”状态，并显示自己的“悬停”当你悬停它

就是这样，我希望有人觉得它有用。

— 鲁福
source
不错的解决方案。在尝试第一个样本时，我注意到如果将过渡持续时间增加到4s，则在过渡的中间z索引切换时，您会看到非常明显的跳跃。至少在Chrome 35上，您可以通过将属性值更改为“所有4s缓解，z-index 1ms”（jsfiddle.net/eD2zL/330）来更改z-index开关的时间并清理过渡。
— Neal Stublen
2
@NealS。你是对的。虽然这个答案是2岁，但是我将删除z-index，似乎没有必要。图像只需要按顺序排列。
— Ruffo 2014年
非常感谢。您的解决方案对我很有帮助。
— Slam
如果使用此解决方案，可能会出现“延迟加载”吗？
— 丹尼尔（Daniel）
16

我想出了一个对我有用的解决方案...

如果您有一个仅包含链接的列表项（或div），并且假设这是页面上指向Facebook，Twitter等的社交链接。而您使用的是精灵图片，您可以执行以下操作：

<li id="facebook"><a href="facebook.com"></a></li>

将“ li”背景设为按钮图片

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

然后，使链接的背景图像处于按钮的悬停状态。还要向其添加opacity属性并将其设置为0。

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

现在，您需要的只是“ a：hover”下的“ opacity”并将其设置为1。

#facebook a:hover {
   opacity:1;
}

将每个浏览器的不透明度转换属性添加到“ a”和“ a：hover”，这样最终的css将如下所示：

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

如果我正确地解释了它，应该让您有一个褪色的背景图像按钮，希望至少有帮助！

— 奥斯汀·帕里什·托马斯
source
3
我还制作了一个视频教程版本。youtube.com/watch?v=6ieR5ApVpr0
— Austin Parrish Thomas
AFAIK您不需要在悬停伪类上指定过渡；锚标记类型的过渡定义将保留到悬停行为，您只需更改不透明度即可。请记住，此示例效果很好，因为样式直接应用于ID /标记类型。如果对类进行此操作，则必须确保没有添加和删除已定义过渡的类。
— KeithS
13

您可以像在Fiddle中一样使用伪元素来获得所需的效果。

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML：

<div class="title">
    <a href="#">HYPERLINK</a>
</div>
— 马克斯·克鲁特
source
2
这很有效，但是您可能会遇到2个问题：1）如果看不到:after元素，请尝试进行设置，width并使用heightas 100%代替inherit，2）如果元素background-image实际显示在前景中，请对该:after元素使用负索引：z-index: -1;
— Radek Pech
9

如果可以使用jQuery，则可以尝试使用BgSwitcher插件来切换带有效果的背景图像，这非常易于使用。

例如 ：

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

并添加自己的效果，请参阅添加效果类型

— MaxDhn
source
谢谢，我使用此插件通过动画处理表格背景变化解决了该问题。
— userlond
4

尝试此操作，可使背景动画在Web上工作，但混合移动应用程序无法工作

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}
— 赫舍姆·纳赛尔（Hesham Nasser）
source
4

考虑到背景图片无法动画处理，我创建了一个小SCSS mixin，允许使用伪选择器之前和之后在2个不同的背景图片之间进行切换。它们位于不同的z索引层。前面的一个从不透明度0开始，并随着悬停可见。

您也可以使用相同的方法来创建具有线性渐变的动画。

脚本

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

现在，您可以简单地将其与

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

您可以在这里查看：https : //jsfiddle.net/pablosgpacheco/01rmg0qL/

— 巴勃罗·SG·帕切科
source
非常好的解决方案！让我更好地理解了如何充分利用元素状态'：before'和'：after'作为奖励:-)
— joronimo
3

如果opacity不能选择设置动画，则还可以设置动画background-size。

例如，我使用此CSS设置backgound-image了延迟。

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}
— shock_one
source
如果要将背景图片的渐入效果从设置.after为.before，则必须将背景图片设置为.before。否则，它将消失而没有动画。
— Radek Pech 2015年
2

Salam，此答案仅在Chrome中有效，导致IE和FF支持颜色转换。

不需要制作HTML元素opacity:0，因为有时它们包含文本，也不需要将元素加倍！

链接到jsfiddle中的示例的问题需要做一个小改动，那就是将一个空图像的放置.title a方式background:url(link to an empty image);与您放置该图像的方式相同，.title a:hover但是将其设置为空图像，然后代码就可以工作了。

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

看看这个 https://jsfiddle.net/Tobasi/vv8q9hum/

— 穆罕默德·苏莱曼
source
仍然无法在Fire Fox或IE上工作:(，但是在Chrome中看起来不错
— Mohammed Suleiman
1

克里斯的励志文章在这里：

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

我设法解决了这个问题：

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}
— 卡罗尔·麦凯
source
0

我为此付出了一些努力，我首先将一叠图像彼此叠加使用，每三秒钟，我试图制作动画到该堆栈中的下一个图像，并将当前图像扔到堆栈底部。同时，我正在使用如上所述的动画。我无法让它为我的一生工作。

您可以使用此库，该库允许使用jquery-backstretch动态调整大小，支持幻灯片的背景图像**。

https://github.com/jquery-backstretch/jquery-backstretch

— 阿基尔·卡纳（Akhil Khanna）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.