CSS - 與多個 Div 共享漸變

Question

您好我正在嘗試創建一個從第一個 div 開始到最后一個 div 結束的漸變。

很像 Instagram 消息應用程序：

我嘗試使用Multiple.js但我無法讓它工作：

這是我的 HTML 代碼：

<div class="messageRow messageRowFromRecipient">
 <div class="message messageFromRecipient">
  <div class="messageContent">Hello!</div>
   <div class="messageTimestamp">8:54 PM</div>
  </div>
</div>

我嘗試使用Multiple.js運行此 javascript 代碼但沒有任何反應。：

var multiple = new Multiple({
  selector: '.messageFromRecipient',
  background: 'linear-gradient(#273463, #8B4256)'
});
multiple.update();

所以現在我想知道，是否有純 javascript/css 方法來實現這一點？ 任何人都可以請教。 謝謝！

Answer 1

您一定沒有正確包含指向多個CSS 和 Javascript 的鏈接。 在下面的代碼片段中，您可以看到您的代碼按預期工作......

 var multiple = new Multiple({ selector: '.messageFromRecipient', background: 'linear-gradient(#273463, #8B4256)' }); // multiple.update(); /* not required */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple.js/0.0.1/multiple.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/multiple.js/0.0.1/multiple.css" rel="stylesheet"/> <div class="messageRow messageRowFromRecipient"> <div class="message messageFromRecipient"> <div class="messageContent">Hello:</div> <div class="messageTimestamp">8:54 PM</div> </div> </div> <br> <div class="messageRow messageRowFromRecipient"> <div class="message messageFromRecipient"> <div class="messageContent">Hello:</div> <div class="messageTimestamp">8:54 PM</div> </div> </div> <br> <div class="messageRow messageRowFromRecipient"> <div class="message messageFromRecipient"> <div class="messageContent">Hello:</div> <div class="messageTimestamp">8:54 PM</div> </div> </div> <br> <div class="messageRow messageRowFromRecipient"> <div class="message messageFromRecipient"> <div class="messageContent">Hello!</div> <div class="messageTimestamp">8:54 PM</div> </div> </div> <br> <div class="messageRow messageRowFromRecipient"> <div class="message messageFromRecipient"> <div class="messageContent">Hello!</div> <div class="messageTimestamp">8:54 PM</div> </div> </div>