akn*_*ds1 58 css jquery html5 css3
我有一个div带有文本的元素和一个背景图像,它是通过CSS属性设置的background-image.是否有可能通过jQuery淡入背景图像？
div {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
border: 1px solid #666;
height: 10em;
}<div>Text</div>编辑
我做了一个小提琴,举例说明了我的情景.基本上,这会配置一个初始background-image和一个transition,并background-image使用jQuery 更改.在我的测试中,两个图像之间没有动画过渡.
EDIT2
我修改过的小提琴有效!
小智 30
我一直在寻找年龄,最后我把所有东西放在一起找到我的解决方案.伙计们说,你不能淡入/淡出html-background的background-image-id.这绝对是错误的,因为你可以通过实施下面提到的演示来解决
CSS:
html, body
height: 100%; /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */
overflow: hidden; /* hide scrollbars */
opacity: 1.0;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
transition: background 1.5s linear;
现在可以使用JavaScript轻松完成更改正文的背景图像:
switch (dummy)
case 1:
$(document.body).css({"background-image": "url("+URL_of_pic_One+")"});
waitAWhile();
case 2:
$(document.body).css({"background-image": "url("+URL_of_pic_Two+")"});
waitAWhile();
Nic*_*ici 10
使用现代浏览器，我更喜欢使用一些 Js 和 CSS3 的轻量级方法......
transition: background 300ms ease-in 200ms;
看这个演示：
http://codepen.io/nicolasbonnici/pen/gPVNbr
小智 7
这是对我及其纯CSS起作用的东西
的CSS
html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#bg {
width: 100%;
height: 100%;
background: url('/image.jpg/') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */
animation: myfirst 5s ;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {opacity: 0.2;}
to {opacity: 1;}
}
/* Standard syntax */
@keyframes myfirst {
from {opacity: 0.2;}
to {opacity: 1;}
}
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="bg">
<!-- content here -->
</div> <!-- end bg -->
</body>
</html>
您可以将不透明度值设为
div {opacity: 0.4;}
对于IE,您可以指定为
div { filter:alpha(opacity=10));}
降低价值 - 提高透明度.
| 归档时间： |
|
| 查看次数： |
267693 次 |
| 最近记录： |