我們如何使用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將滑塊賦予背景圖片？

回答

相關問題