我们如何使用css将滑块赋予背景图片？

代码：我们如何使用css将滑块赋予背景图片？

<html> 
<head> 
    <style> 
    #example1 { 
     background-image: url(img_flwr.gif), url(paper.gif), url(flower.gif); 
     background-position: right bottom, left top; 
     background-repeat: no-repeat, repeat; 
     padding: 100px; 
    } 
    </style> 
</head> 
<body> 
    <div id="example1"> 
    </div> 
</body> 
</html>

在这里，我用三个背景图像即img_flwr.gif，paper.gif，flower.gif。我想用css来滑动这些图片。我不想淡化这些图像。那么，我怎么能这样做呢？

来源

2017-03-08 sam orten

你自己做了什么？ –

您可能想为此使用JavaScript，因为CSS仅用于样式。 – Jer

你想设置多个背景图片吗？你应该使用'setInterval'和jQuery css http://api.jquery.com/css/来实现这一点 –

制作图像元素并使用position: absolute和z-index CSS属性将图像设置在另一个元素的后面。然后用JQuery制作滑块。

<html> 
<head> 
    <style> 
#example1 { 
    background-position: right bottom; 
    background-repeat: no-repeat, repeat; 
    padding: 100px; 
    z-index: 10; 

} 
#slider { 
    position: absolute; 
    z-index: 0; 
} 
    </style> 
    </head> 
    <body> 
    <div id="example1"> 

    </div> 
<div id="slider"> 
<img src="flwr.jpg" alt="Paris"> 
<img src="paper.jpg" alt="Paris"> 
<img src="flower.jpg" alt="Paris"> 
    </div> 

<script> 

</script> 



</body> 
</html>

来源

2017-03-08 08:20:18 Nico

我们如何使用css将滑块赋予背景图片？

回答

相关问题