JQuery(簡稱:jq)是一個快速、簡潔的JavaScript庫。它為HTML文檔遍歷和操作、事件處理、動畫和AJAX操作提供了簡單易用的API。下面我們來談一下jq的背景圖片CSS的使用。
/* 設置元素背景圖片 */ $(selector).css("background-image","url(image.jpg)"); /* 同時設置多個屬性 */ $(selector).css({ "background-image" : "url(image.jpg)", "background-color" : "#ccc" });
可以看到,使用jq來設置元素的背景圖片和CSS樣式等屬性跟原生JavaScript相比幾乎沒有什么區別。只需要掌握好jq庫中對應的方法和api即可。
了解了基本的設置背景圖片的方法后,下面我們來看一下如何將背景圖片設置在CSS樣式當中:
/* 在CSS樣式中設置背景圖片 */ $(document).ready(function(){ $("p").css("background-image", "url(image.jpg)"); });
以上代碼就是在CSS樣式中設置背景圖片的一個demo。因為jQuery中有很多實用性比較高的api,所以我們可以將大量的代碼寫在CSS樣式中,讓代碼看起來更加簡潔明了易懂。
當然,若是不習慣將代碼寫在CSS樣式中也沒有關系。使用其他方法來設置元素的屬性也是完全沒有問題的,只需要根據實際情況來選擇使用合適的方法即可。
上一篇css圈圈 擴散
下一篇css圓角邊框屬性百分比