如何使用CSS將滑塊賦予背景圖像？

Question

碼：

<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滑動這些圖像。 我不想使這些圖像褪色。 那么，我該怎么做呢？

Answer 1

創建一個圖像元素，並使用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>

如何使用CSS將滑塊賦予背景圖像？

問題描述

1 個解決方案

解決方案1
0 2017-03-08 08:20:18

如何使用CSS將滑塊賦予背景圖像？

問題描述

1 個解決方案

解決方案1 0 2017-03-08 08:20:18

解決方案1
0 2017-03-08 08:20:18