背景平鋪(相容IE8)
標準瀏覽器通過background-size屬性設定;IE8以下通過濾鏡實現。
程式碼如下:
1 /* IE8 */ 2 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='demo.jpg', sizingMethod='scale'); 3 -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='demo.jpg', sizingMethod='scale'); 4 5 /* 標準瀏覽器 */ 6 background-size: cover;
上述程式碼中:
- 引數 src 是圖片路徑,sizingMethod = 'scale' 表示濾鏡的尺寸方法為自適應容器大小;
- cover表示:將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器。
相關推薦
背景平鋪(相容IE8)
標準瀏覽器通過background-size屬性設定;IE8以下通過濾鏡實現。 程式碼如下: 1 /* IE8 */ 2 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='demo.jpg', sizingMethod=
用原生JS實現多張圖片上傳及預覽功能(相容IE8)
最近需要做一個圖片上傳預覽的功能(相容IE8-11、chrome、firefox等瀏覽器),網上現有的檔案上傳元件(如webuploader)總是會遇到一些相容性問題。於是我參考了一些博文(連結找不到了⊙o⊙…),自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能:
js貪吃蛇小遊戲(相容ie8)DOM,BOM操作
效果圖 本篇將使用JavaScript 編寫一個貪吃蛇的小遊戲,採用OOP(面向物件)程式設計 基本沒有CSS樣式和HTML結構,主要是體會js操作 HTML程式碼 <div class="map"></div> &
用jQuery實現瀑布流及滾動懶載入(相容IE8)
上篇 js原生瀑布流並實現滾動懶載入(相容IE8) 講解了瀑布流的原理及滾動懶載入的原理,並用原生js實現了效果,那麼原生js必定有些繁瑣和麻煩,這一篇我們就換成jQuery,程式碼會簡潔很多,思路和原理我就不贅述了,如果想看的話,移步 js原生瀑布流並實
可編輯的DIV(相容IE8)以及插入內容到游標位置
在做web版聊天程式時,往往需要將一個DIV設定為可編輯狀態,並且可以插入表情。 插入表情時,不僅僅是在輸入的文字最後追加表情,還可能在輸入文字的中間,即游標位置插入表情(游標後還有文字)。 另外,還需要保證貼上進來的文字必須是純文字,不然百度搜索一篇文章貼上進來,就太亂了。我們希望
JS Input輸入框實時監聽示例(相容IE8)
HTML:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
前端圖片驗證碼(相容ie8)
讓可愛的我mack一下 前提 最後會附上原始碼的~ 圖片驗證碼外掛名稱: GVerify.js GVerify主要使用canvas生成圖片驗證碼,但是ie8還沒有canvas。 針對ie8 解決canvas外掛:excanvas.js
遮蔽瀏覽器右鍵選單功能,自定義右鍵選單(相容IE8)
做了個自定義右鍵選單的功能,和獲取選中文字內容相關,一起記錄一下。 網上查閱嘗試了很多方式,選擇了一個較為簡潔的方式實現,程式碼很少,進行細節調整後發現存在IE8相容性問題,又查閱資料後進行了優化,目前可以完美相容IE8,但注意jQuery版本必須1.7+,我
網頁導航菜單的子菜單平鋪(帶背景欄)實現
body hover 動態設置 ive 要求 解決方案 滿了 gpo 位置 - 之前給公司做的一個小型知識庫管理網站時遇到一個問題,在這裏記錄下解決的過程。 公司的美工要求首頁導航菜單 要跟他們公司的網站風格保持一致,如圖所示 (子菜單是平鋪的)
前端檔案上傳一整套流程(相容IE8,解決 input標籤必須主動點選等問題)
1.基本思路 在谷歌下以<input type=’file’/>為基本的條件,並且使他隱藏,通過點選提交按鈕被動觸發上傳檔案的事件,這裡不需要用到表單提交的相關問題,在js方面,使用formData,通過獲取<input type=”file”>標籤的files屬性,來獲
IE8下的背景平鋪 background-size不起作用
今天在寫專案的時候,用到了background-size:cover。在chrome上面預覽很正常。 但是跑到IE下面一看。雖然有background-image 的屬性。但是效果不能如願。 後來,在網上查到需要用濾鏡解決拉伸問題。 程式碼如下: filter: pro
移動端設置, mobile , 一張圖片作為背景 ,平鋪 ,自動拉伸 , 圖片 鋪滿視界 ,窗口. background-image , background-size, background-repeat
效果 背景 dev 技術 oct pla div osi eight 1. 效果: 瀏覽器: 手機模擬: 2.代碼: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&g
CSS三角的寫法(相容IE6)
目錄 簡介 優點 原理 1. 先建立一個div 2. 然後給div設定邊框。 3. 給div的四個邊框都設定不同的顏色 4. 把寬度和高度都變成0 5. 其餘角為透明 6. 相容IE6瀏覽器 造成這樣的原因是:
記錄一次使用form表單完成圖片上傳功能(相容ie9)
1.前臺頁面 <div class="dform_con" style="position: relative;" id="uploadform"> <iframe id="file_upload_return" style="d
ZZMonster一個方法自動生成Model(相容YYModel)
# ZZMonster(相容YYModel) 純程式碼編寫,無需安裝任何外掛,一個方法輕鬆搞定複雜Json轉Model。(相容[YYModel](https://github.com/ibireme/YYModel)) ### 示例: ### 1.下載[ZZ
linux平臺下(Ubuntu16.04)安裝與配置mysql(5.7.24)以及圖形管理工具Workbench
1.在ubuntu系統下,開啟終端 方法(1):在左上角的選單上點一下,出來一列,在裡面選擇[附件] 中的[終端],點一下就OK。 方法(2):快捷鍵Ctrl+Alt+T 2.安裝MySQL5.7需要的依賴,使用命令: sudo apt-get install
js函式封裝,使一個obj的透明度漸變,淡入淡出(相容IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
js:可輸入可選擇的select下拉框,可及時匹配包含輸入的內容(相容ie)
1、原理: 1.1將input輸入框和select框合併在一起,但是顯示出向下點選的按鈕: 這種比較容易做到 1.2出現輸入值能夠自動匹配的功能 動態的載入一個臨時的div出現在該input下方,當點選頁面中的空白地方,div隱藏。 1.3程式碼: <!docty
ie8以下版本(包括ie8)的瀏覽器不支援html5標籤屬性解決方案(Modernizr 2.6.2外掛的使用)
我這邊申明下:我寫這篇日誌主要是想然ie8能夠支援html5的個別標籤閉合,並不能讓ie完全支援html5,我之前寫的可能會誤導很多同學,希望大家能明白。 今天腦抽想用html5標籤設計一個網頁,我本人用的是火狐瀏覽器,都弄好後我發現一個很嚴重的問題,除了ie9以下
vue上傳(相容IE9)
專案中vue檔案上傳功能原來使用的是element ui元件,頭像上傳裁剪使用的是vue-image-crop-upload,但是這兩個元件只支援到IE10+,現在專案要求相容IE9,這兩個元件就沒辦法實現。 我基於Web Uploader封裝了vue上傳功能,Web Upl