css - CSS3背景图片转换

我想尝试淡出淡出""淡出淡出" 使用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/]

11个解决方案
91 votes

您可以转换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不确定。

Hengjie answered 2019-08-13T12:32:48Z
35 votes

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

首先,你需要制作一个"容器" 对于nth-child(),它将同时包含正常和悬停状态:

<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/](如果你使用这个,&#34;正常&#34;状态将是你的容器的第一个孩子,或更改nth-child()订单)

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

基本上,你需要隐藏&#34;正常&#34; 陈述他们的&#34;悬停&#34; 当你把它悬停

那就是它,我希望有人觉得它很有用。

Ruffo answered 2019-08-13T12:33:52Z
15 votes

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

如果你有一个仅包含链接的列表项(或div),并且让我们说这是用于你的页面上的社交链接到facebook,twitter,等等。 并且您使用精灵图像可以执行此操作:

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

将&#34; li&#34; s的背景设为您的按钮图像

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

现在你所需要的只是&#34;不透明度&#34; 在&#34; a:hover&#34; 并将其设置为1。

#facebook a:hover {
   opacity:1;
}

将每个浏览器的不透明度转换属性添加到&#34; a&#34; 和&#34; a:悬停&#34; 所以最终的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;
}

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

Austin Parrish Thomas answered 2019-08-13T12:35:03Z
10 votes

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

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>
MaxCloutier answered 2019-08-13T12:35:33Z
10 votes

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

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

Olwaro answered 2019-08-13T12:36:11Z
9 votes

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

例如 :

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

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

MaxDhn answered 2019-08-13T12:36:52Z
3 votes

如果无法选择动画backgound-image,则还可以设置动画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 answered 2019-08-13T12:37:31Z
2 votes

萨拉姆,这个答案只适用于Chrome,导致IE和FF支持颜色过渡。

没有必要制作HTML元素.title a,因为它们有时会包含文本,而且不需要将元素加倍!

链接到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/]

mohammed Suleiman answered 2019-08-13T12:38:31Z
1 votes

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

@-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 answered 2019-08-13T12:39:01Z
1 votes

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

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

SCSS

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

Pablo S G Pacheco answered 2019-08-13T12:40:23Z
0 votes

克里斯在这里鼓舞人心的帖子:

[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); 
    }
}
Carol McKay answered 2019-08-13T12:41:19Z
translate from https://stackoverflow.com:/questions/9483364/css3-background-image-transition