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/

512726 次浏览
小开

不幸的是，您不能在 background-image上使用转换，请参阅 可动画属性列表。

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

小开

解决方法(我自己找到的)是一个忍者的把戏，我可以给你两种方法:

首先你需要为 <img>制作一个“容器”，它将同时包含 正常和 盘旋状态:

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

基本上，你需要隐藏“正常”状态，并显示他们的“悬停”时，你的 盘旋

就是这样，我希望有人发现它有用。

小开

我想出了一个对我有效的解决办法。

如果你有一个只包含链接的列表条目(或 div) ，假设这是你的页面上到 facebook，twitter，等等的社交链接，你可以使用一个 sprite 图片，你可以这样做:

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

将“ li”作为你的按钮图像的背景

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

然后将链接的背景图像设置为按钮的悬停状态。还要添加不透明度属性，并将其设置为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;
}

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

小开

你可以转换 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 还没有实现(太棒了) ，IE 还不确定。

小开

如果你可以使用 jQuery，你可以尝试 BgSwitch插件来切换背景图像和效果，这很容易使用。

例如:

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

并添加自己的效果，见 添加效果类型

小开

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

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>
小开

如果动画 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;
}
小开

克里斯在这里写了一篇鼓舞人心的文章:

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);
}
}
小开

萨拉姆，这个答案只在 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/

小开

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

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

考虑到背景图片不能做动画, 我创建了一个小 SCSS 混合允许转换之间的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/

小开

这可以通过使用伪元素来实现，比使用公认的答案更好的跨浏览器支持，如下所示: https://stackoverflow.com/a/19818268/2602816

小开

我为此挣扎了一段时间，我首先使用一堆图片叠加在一起，每隔三秒钟，我就试着在堆栈中的下一个图片上做动画，然后把当前的图片扔到堆栈的底部。与此同时，我正在使用如上所示的动画。我一辈子都没办法让它工作。

您可以使用这个库，它允许使用 jquery-back 调整 * * 动态调整大小，支持幻灯片放映的背景图像 * * 。

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


提交答案