JavaScript設定背景圖片
本章節通過程式碼例項介紹一下如何利用js實現動態的為div元素設定背景圖片。
核心程式碼片段如下:
[JavaScript] 純文字檢視 複製程式碼odiv.style.backgroundImage="url('images/test.jpg')";
下面給出一個完整的程式碼例項,使用的背景圖片如下:
309x99的圖片分隔為9份,每一份的長寬分別是103px和33px。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #ant { width:400px; height:300px; background-color:#ccc; } </style> <script> window.onload = function () { var odiv = document.getElementById("ant"); var obt = document.getElementById("bt"); obt.onclick = function () { odiv.style.backgroundImage = "url('mytest/demo/mybg.png')"; odiv.style.backgroundRepeat = "no-repeat"; odiv.style.backgroundPosition = "0px -33px"; } } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="檢視演示"/> </body> </html>
上面的程式碼實現了使用js設定元素背景的功能,可以看出背景圖片會覆蓋背景色。
(1).backgroundImage用來設定背景圖片路徑。
(2).backgroundRepeat用來設定背景圖片的重複規則。
(3).backgroundPosition用來設定背景圖片的定位。
也可以使用setAttribute()函式實現,具體參閱JavaScript setAttribute()一章節。
背景圖片定位參閱CSS background-position一章節。
相關文章
- JavaScript設定背景圖片位置JavaScript
- JavaScript動態設定元素背景圖片JavaScript
- 為view設定背景圖片View
- html+css 設定背景圖片HTMLCSS
- CSS設定背景圖片程式碼CSS
- vscode設定背景圖片VSCode
- UIView設定背景圖片幾種方式UIView
- 為input文字框設定背景圖片
- CSS3 設定多個背景圖片CSSS3
- c# 設定MdiClient窗體的背景圖片C#client
- 設定二維碼圖片背景透明教程
- 設定背景圖片鋪滿整個螢幕
- Android之背景圖片設定為重複Android
- css設定背景圖片鋪滿固定不動CSS
- JavaScript獲取背景圖片定位值JavaScript
- css設定背景圖片樣式程式碼例項CSS
- QT中 視窗部件的 背景圖片 的設定QT
- Qt中按鈕背景圖片的切換設定QT
- CSS設定背景圖片水平重複和垂直重複CSS
- 使用javascript設定圖片的透明度JavaScript
- 2個方式快速解決:Word背景圖片怎麼設定
- 直播平臺原始碼,qt繪畫事件-設定背景圖片原始碼QT事件
- 微信小程式設定背景圖微信小程式
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- windows10背景圖怎麼設定_win10設定桌面背景圖的方法WindowsWin10
- HT For Web 拓撲圖背景設定Web
- svg 圖示設定背景顏色SVG
- Windows設定圖片縮圖Windows
- 設定svg圖片大小SVG
- Excel為批註設定圖片背景 出現Bad Request - Request Too longExcel
- CSS3第二天(元素顯示模式、圖片背景設定)CSSS3模式
- HighCharts之圖表背景設定
- CSS · 兩種背景圖片CSS
- css 背景圖片屬性CSS
- WPF 按鈕背景圖片
- 美圖秀秀怎麼給圖片新增背景?美圖秀秀給圖片新增背景的教程
- 美圖秀秀-美化圖片之【背景虛化】介面設計
- CSS背景圖片集中在同一個圖片CSS