✍ 📁 🙈 🙉 🙊 : 標簽 img 圖片標籤

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。

blur模糊	0px 到100px，的百分比控制
sepia懷舊	0 or 1，1為元素轉換成黑白影像
invert負片	0 or 1，1為元素轉換成負片影像
opacity透明	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast對比	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	0 to 10， 10為元素轉換成最大飽和度
brightness亮度	0 to 10， 10為元素轉換成最大亮度度
grayscale灰階	0 to 10， 10為元素轉換成最大灰階度
hue-rotate色相旋轉	0deg – 360deg 旋轉色相環
drop-shadow下拉陰影	陰影效果

<input  onchange="Frange(this.value)" type="range" id="points" min="0.1" max="10">
</td></tr>
</tbody></table>
</div>
<div id="DP1">
</div>
<div id="DP2">
</div>
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>   
<script >
$('#points').attr('disabled', 'disabled');

function Fblur(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","blur("+pp+"px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","blur("+pp+"px)"); 
cc3 = $('#imgFiltro').css("-o-filter","blur("+pp+"px)");
cc4 = $('#imgFiltro').css("-ms-filter","blur("+pp+"px)");
cc5 = $('#imgFiltro').css("filter","blur("+pp+"px)");
document.getElementById('DP1').innerHTML ="blur" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=100;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("blur");
}

function Fbrightness(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","brightness("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","brightness("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","brightness("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","brightness("+pp+")");
cc5 = $('#imgFiltro').css("filter","brightness("+pp+")");
document.getElementById('DP1').innerHTML ="brightness" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
f16311("brightness");
}

function Fcontrast(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","contrast("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","contrast("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","contrast("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","contrast("+pp+")");
cc5 = $('#imgFiltro').css("filter","contrast("+pp+")");
document.getElementById('DP1').innerHTML ="contrast" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;f16311("contrast");
}

function Fdropshadow(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte",    "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc4 = $('#imgFiltro').css("-ms-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc5 = $('#imgFiltro').css("filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
document.getElementById('DP1').innerHTML ="drop-shadow" ;
$('#points').attr('disabled', 'disabled');
f16311("dropshadow");
}

function Fgrayscale(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "grayscale(" +pp+"%)");      
cc2 = $('#imgFiltro').css("-webkit-filter","grayscale(" +pp+"%)");        
cc3 = $('#imgFiltro').css("-o-filter",     "grayscale(" +pp+"%)");       
cc4 = $('#imgFiltro').css("-ms-filter",    "grayscale(" +pp+"%)");          
cc5 = $('#imgFiltro').css("filter",        "grayscale(" +pp+"%)");      
document.getElementById('DP1').innerHTML ="grayscale" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=200;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("grayscale");
}

function Fsepia(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "sepia(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","sepia(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "sepia(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "sepia(1)");
cc5 = $('#imgFiltro').css("filter",        "sepia(1)");
document.getElementById('DP1').innerHTML ="sepia" ;
$('#points').attr('disabled', 'disabled');
f16311("Fsepia");
}

function Fhuerotate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "hue-rotate("+pp+"deg)");      
cc2 = $('#imgFiltro').css("-webkit-filter","hue-rotate("+pp+"deg)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "hue-rotate("+pp+"deg)");
cc4 = $('#imgFiltro').css("-ms-filter",    "hue-rotate("+pp+"deg)");
cc5 = $('#imgFiltro').css("filter",        "hue-rotate("+pp+"deg)");
document.getElementById('DP1').innerHTML ="hue-rotate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=360;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("Fsepia");
}

function Finvert(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "invert(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","invert(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "invert(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "invert(1)");
cc5 = $('#imgFiltro').css("filter",        "invert(1)");
document.getElementById('DP1').innerHTML ="invert" ;
$('#points').attr('disabled', 'disabled');
f16311("invert");
}

function Fopacity(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "opacity("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "opacity("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "opacity("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "opacity("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "opacity("+ pp + ")");
document.getElementById('DP1').innerHTML ="opacity" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=1;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("opacity");
}

function Fsaturate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "saturate("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "saturate("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "saturate("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "saturate("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "saturate("+ pp + ")");
document.getElementById('DP1').innerHTML ="saturate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("saturate");
}

function Fnone(){   
$('#imgFiltro').removeAttr("style")
document.getElementById('DP1').innerHTML ="none" ;
 
f16311("none");
}

}
   
function f16311(x){  
//if(x == "points"){Fpoints();return;}
//$('#imgFiltro').removeClass();  
//$('#imgFiltro').addClass(x);  
var T_style = "";
    T_style +=  '-moz-filter :';
    T_style += $('#imgFiltro').css("-moz-filte");      
    T_style += '<br /> -webkit-filter : ' ;
    T_style += $('#imgFiltro').css("-webkit-filter"); 
    T_style += '<br /> -o-filter : ';
    T_style += $('#imgFiltro').css("-o-filter");      
    T_style += '<br /> -ms-filter :';
    T_style += $('#imgFiltro').css("-ms-filter");
    T_style += '<br /> filter : ';
    T_style += $('#imgFiltro').css("filter");  
    document.getElementById('DP2').innerHTML =T_style ;

//alert(x)
}

</script>

HTML img 圖片標籤

HTML <img> 圖片標籤用來在網頁顯示圖片，增加網頁內容豐富程度，
<img xxxx xxxx xxxx> img 標籤為一個獨立個體的，不需要像其他標籤唯雖需要結尾標籤，所以無 ~~</img>~~ 結尾。
img 圖片標籤還包含許多不同的參數，用來替圖片做些設計，例如 border 可以替圖片增加邊框、width 可以現置圖片的顯示寬度、height 可以限制圖片的顯示高度 ... 等。

<img src="要插入的圖片 URL" alt="圖片替代文字" title="要顯示的文字" border="圖片邊框">

<img>語法中 src 必須之外，其他項目都是選擇項目，只要寫<img src="圖片網址">就可以把一張圖片插入到網頁中，需要替圖片做任何的設計，其他參數也不需要做任何的文字標示。

延伸閱讀 :
CSS max-width CSS max-height 屬性的功能是用來限制網頁元素最大寬度不可以超過指定的限度。
CSS min-width CSS min-height 屬性的功能是用來設定網頁元素的最低高度限制。

CSS background-image 用來設定背景圖片，設定單一網頁元素，如 DIV 區塊、span 區域或 HTML table 表格的背景圖片。

參數	用法說明
src	圖片網址，必要項目。
border	圖片邊框，例如 border="0" 代表邊框為 0。
alt	圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title	圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width	圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height	圖片高度，例如 height="100px" 代表高度限制在 100px。

width:auto 自動判斷圖片寬度。

<img style="width:auto;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" />

width:300px : 將圖片寬度設為 300px。

<img style="width:300px;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" />

height: 100px; width: 100px; 將圖片寬度高度設為 100px。

<img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 100px; width: 100px;" />

height: inherit; width: inherit; 將圖設為父層的寬度高度屬性值。

<div style="height: 150px; width: 150px;">
<img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: inherit; width: inherit;" /></div>

max-width 及 max-height 設為 100px ，將圖寬度/高度有幾大都不能超出 100px。

<img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" />

height: 50% width: 50%; ，將圖寬度/高度設定跟父元素的寬度是400px 的 50%，同樣父元素的高度是400px 的 50% 那麼，這個 img 的寬度/高度應該是 200px。
原文網址：https://read01.com/jadPB.html。

<div style="height: 400px; width: 400px;">
<img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 50%; width: 50%;" /></div>

box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。

<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" width="200px" />

#imgT 為這個 table id ，設定 id : < table id="imgT ......，加入下列 CCS 後出現背景圖案。

<style>
#imgT {background-image: url("http://vignette1.wikia.nocookie.net/evchk/images/5/58/81421815156067047.jpg/revision/latest?cb=20140125161815");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS Filters濾鏡效果

CSS Filters濾鏡效果

HTML img 圖片標籤

HTML img 圖片標籤

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS Filters濾鏡效果

CSS Filters濾鏡效果

HTML img 圖片標籤

HTML img 圖片標籤

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單