文章專區

網頁設計相關文章

當滑鼠移到圖片上會有放大的效果,這在網頁設計上是很常見的,而這效果用CSS就可以做出來了??! transform可以設定圖片放大的倍率,   transition可以做出圖片緩慢放大的效果, 而滑鼠移入所產生的變化要用:hover來實現。  外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分, transform: scale(1.1)為圖片放大的倍率 transition:all 0.5s ease 0s為圖片放大所需的時間和特效 範例: See the Pen gKQjOy by Ya (@bok770) on CodePen.
就像CSS的box-shadow可以幫區塊加上陰影一樣,CSS也有能用來幫文字上陰影的屬性-text-shadow。 可設定值如下: text-shadow:  h-shadow v-shadow blur spread color; h-shadow:水平位移距離 v-shadow:垂直位移距離 blur:模糊半徑 spread:擴散距離 color:顏色   範例: See the Pen gKoYLe by Ya (@bok770) on CodePen.    也可以運用此屬性達成以下效果:   光暈效果,只要將前兩個值(h-shadow、v-shadow)設為0即可。若要加強效果可多寫幾次。   See the Pen qKpWmR by Ya (@bok770) on CodePen.   文字輪廓 若有四個陰影,能夠為文字加一層輪廓。不過還可以用CSS另一個屬性text-stroke來呈現。   See the Pen NzXKyJ by Ya (@bok770) on CodePen.
 之前的文章Flexslider--方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件,主要是以一張張圖片作輪播,而這次我們介紹另一套可以多組圖片輪播切換的套件,可應用於更多張圖片的展示。 此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案 可於slick官網下載,官網上更是陳列了許多項不同的輪播樣式,附上原始碼可以複製貼上。 詳細使用步驟如下: 首先到官網,點擊上方的「get it now」   頁面會滑到該對應位置,點擊「Download Now」即可下載壓縮檔,或是選擇直接複製外連網站的連結。   官網上展示了許多樣式,提供下方的原始碼複製貼上。   解壓後的檔案,只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了??!放進自己的專案裡,依據自身需求修改檔案路徑和設定即可套用了。    
 z-index可以設定元素的堆疊順序, 設定值越高越前面,可以為負數,例如:z-index: -1。 另外要注意的是z-index只能在有設定位(position)的元素上才會奏效。 可設定為position: static、absolute、relative、fixed。 如下圖範例1中所示,如果將色塊設成z-index: 1的話,就會將文字擋住了。 See the Pen NMQENQ by Ya (@bok770) on CodePen.   然而如果改成z-index:-1的話,因為色塊的順序為負的,所以會被放置在文字的後面。 See the Pen yjmRGB by Ya (@bok770) on CodePen.   範例2: See the Pen wjVEQq by Ya (@bok770) on CodePen. 如範例2所示,設定值越大的元素( z-index:3),堆疊順序會越前面, 要注意設定值以免遮蓋到後方的元素。  
Select option是下拉式選單,通常用在表單(form)裡,在網頁中很??吹?,像是旅行社的網站會提供旅遊國家讓網友做選擇,或是購物網站提供各項商品項目等等。  基本語法為 < select name="選單名稱" > < option value="選項值" >< /option > < /select > 範例: See the Pen ZompYe by Ya (@bok770) on CodePen. 範例中的travel-form為此選單的名字,可以自己設定, 包在裡面的option是此選單的選項,每個項目都會有一個值(value), 用來判斷所選擇的項目,不會顯示在頁面上, 而 < option >< /option > 之間的文字就是會看到的內容, 這樣一來簡單的下拉式選單就完成了。 可以配合一些JS特效或是使用CSS美觀選單樣式。
在網頁設計上,有時我們只要擷取圖片的一部分時,若是還要另外切圖片的話又會顯得累贅,這時我們可以用CSS的屬性來自由裁切圖片囉! css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來,並利用margin來控制要顯示的部分。 範例: 原本的完整圖片 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   使用css裁切過後 See the Pen KRovqO by Ya (@bok770) on CodePen.   css的clip屬性 clip的屬性值僅有rect( 矩形 ),其值為 rect (top, right, bottom, left),預設值為auto,而必須注意的是此屬性要有position:absolute才會生效,圖片顯示範圍的計算為top減掉bottom為顯示範圍的高,right減掉left為顯示範圍的寬。 範例: See the Pen LmdjJO by Ya (@bok770) on CodePen.
 作為網頁設計師肯定對製圖軟體Photoshop不陌生, 而現在可以直接用CSS呈現囉! 雖然目前的瀏覽器支援度很有限, 除了Opera與IE無法支援以外,Chrome和Firefox則可以不靠前綴即可呈現 。 CSS的mix-blend-mode屬性就跟Photoshop的圖層混合模式一樣,雖然不如Photoshop那麼多,但也高達十六種效果。   就讓我們看以下範例,可以比較各個色彩模式的呈現: mix-blend-mode: normal 一般 預設值,沒有被混合。 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: multiply 色彩增值 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/JvWwbY/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;JvWwbY&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: screen 濾色 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/ervbBa/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ervbBa&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: overlay 覆蓋 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/vjxvgx/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;vjxvgx&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: darken 變暗 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/QrpzdV/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;QrpzdV&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: lighten 變亮 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/odZJZz/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;odZJZz&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-dodge 加亮顏色(減淡) See the Pen &amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/ELWGma/'&amp;amp;amp;amp;amp;amp;amp;gt;ELWGma&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-burn 加深顏色 See the Pen &amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/'&amp;amp;amp;amp;amp;amp;gt;wjJRej&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: hard-light 實光 See the Pen &amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/JvWwyX/'&amp;amp;amp;amp;amp;gt;JvWwyX&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.   mix-blend-mode: soft-light 柔光 See the Pen &amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/bMqOrj/'&amp;amp;amp;amp;gt;bMqOrj&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.   mix-blend-mode: difference 差異化 See the Pen &amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/aGJPLv/'&amp;amp;amp;gt;aGJPLv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.   mix-blend-mode: exclusion 排除 See the Pen &amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/WJpLZa/'&amp;amp;gt;WJpLZa&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.   mix-blend-mode: hue 色相 See the Pen &amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/ELWGbj/'&amp;gt;ELWGbj&amp;lt;/a&amp;gt; by Ya (&amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.   mix-blend-mode: saturation 飽和度 See the Pen &lt;a _fcksavedurl='https://codepen.io/bok770/pen/GdWPOO/'&gt;GdWPOO&lt;/a&gt; by Ya (&lt;a _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   mix-blend-mode: color 顏色 See the Pen <a _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/'>rvyopN</a> by Ya (<a _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   mix-blend-mode: luminosity 明度 See the Pen <a _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/'>LmWMeb</a> by Ya (<a _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.    
 CSS的border屬性可以設定區塊的邊框,預設值為none,常見的有以下: border-style:邊框樣式 border-top: 上框線 border-bottom: 下框線 border-left: 左框線 border-right: 右框線 border: 四邊框線 border-width: 邊線的寬度 border-color:邊線的顏色   範例: border-top:1px solid #000 border-bottom:4px dotted #009FCC border-left:2px dashed  #FF8800 border-right:1px solid  #7A0099   我們可以分別為四邊設定不同的數值,如果說四邊的屬性都一樣時, 可以直接寫border統一描述,而不用四邊都各寫一次。 範例: border: 1px solid #4d4d4d   border-width 屬性是用來設定邊框的寬度。 可用的值除了數字以外,也可以用 thin (薄)、medium (中等)、thick (厚)。 範例: border-width: thin     border-style則可以設定邊框的樣式 設定值如下: border-style:solid 實線  border-style:dotted  點線  border-style:dashed  虛線  border-style:double  雙線  border-style:groove  凹線  border-style:ridge 凸線  border-style:inset 嵌入線  border-style:outset 浮出線   範例: See the Pen <a _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/'>RyrgRe</a> by Ya (<a _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
CSS的cursor屬性可以改變滑鼠游標的形狀, 當滑鼠移過去時,就會顯示自設定的形狀。 共有以下這些屬性值 Crosshair、pointer、text、move、wait、help、progress、 not-allowed、no-drop、no-vertical-text、all-scroll、col-resize、 row-resize、e-resize、ne-resize、n-resize、nw-resize、w-resize、 sw-resize、s-resize、se-resize   範例一覽表,將滑鼠移上即可顯示該游標的圖案: See the Pen &lt;a _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'&gt;GxbGXW&lt;/a&gt; by Ya (&lt;a _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.  也可以自設定圖片作為鼠標,寫法: { cursor: url(圖片的檔案路徑); }  
在網頁設計上對圖片進行透明度處理是相當常見的, 而定義透明效果的屬性是opacity,能夠設定的數值從 0.0 到 1.0。 數值越小,透明度越高。 而IE8及更早的版本使用filter:alpha(opacity=x)。 x 的值從 0 到 100。 數值越小,越透明。 讓我們看以下範例,左為原圖,右圖將透明度調高: See the Pen &amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'&amp;gt;NYzNry&amp;lt;/a&amp;gt; by Ya (&amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.   常見的圖片透明度切換效果, 用hover即可做到, 只要將鼠標移到圖片上即可改變透明度。 範例: See the Pen &amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'&amp;amp;amp;gt;xWzVwv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.
  • 看看吧,朝鲜怎么会相信美国?!除非是傻子。欧洲也不会相信美国,如果欧洲相信美国,欧洲就是傻子。 2018-12-11
  • 默克尔:欧洲要联合自强并与中国等国密切合作 2018-12-11
  • 第十届中国国际公益慈善论坛 2018-08-06
  • 新疆额敏县:“社区影院”助推文化惠民 2018-08-06
  • 101| 524| 394| 377| 795| 430| 763| 928| 491| 430|