CSS3背景图片转换

Question

我正在尝试使用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/

Answer 1

你可以过渡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不确定.

Answer 2

解决方案(我自己发现)是一个忍者技巧,我可以为你提供两种方式:

首先你需要为它制作一个"容器" <img>,它将同时包含正常和悬停状态:

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

• 与CSS3选择器http://jsfiddle.net/eD2zL/1/(如果你使用这个,"正常"状态将是你的容器的第一个孩子,或更改nth-child()顺序)

• CSS2解决方案http://jsfiddle.net/eD2zL/2/(两者之间的差异只是几个选择器)

基本上,你需要隐藏"正常"状态,并在你悬停它时显示它们的"悬停"

就是这样,我希望有人觉得它很有用.

Answer 3

我找到了一个对我有用的解决方案......

如果你有一个只包含链接的列表项(或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"下的"不透明度"并将其设置为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;
}

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

Answer 4

遗憾的是,您无法使用转换background-image,请参阅w3c可动画属性列表.

你可能想做一些技巧background-position.

Answer 5

考虑到背景图像无法动画化，我创建了一个小型 SCSS mixin，允许使用before和after伪选择器在 2 个不同的背景图像之间进行转换。它们位于不同的 z 索引层。前面的那个从不透明度 0 开始，悬停时变得可见。

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

CSS

@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/

Answer 6

您可以使用伪元素来获得您想要的效果,就像我在那个小提琴中所做的那样.

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>

Answer 7

如果你可以使用jQuery,你可以试试BgSwitcher插件来切换背景图像的效果,它非常容易使用.

例如 :

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

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

Answer 8

试试这个，将使背景动画在网络上工作，但混合移动应用程序不起作用

@-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;
}