分類彙整:CSS

CSS文字漸層

h1{ color: #000000; position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)), to(rgba(0,0,0,0))); } <h1>CSS文字漸層</h1>    

發表於 CSS | 發表迴響

CSS:實現強制不換行、自動換行、強制換行

自動換行 div{ word-wrap: break-word; word-break: normal; } 強制不換行 div{ white-space:nowrap; } 強制英文單詞斷行 div{ word-break:break-all; }  

發表於 CSS | 發表迴響

手機版網頁圖片適當顯示問題

透過css可以解決使用手機行動裝置瀏覽網頁時 圖片適當顯示的問題 img{ max-width:100%; height:auto; }

發表於 CSS | 發表迴響

使用CSS背景來呈現浮水印效果

<img src="浮水印.png" style="background-image:url(圖片.jpg);background-size:contain;" /> 浮水印.png 需要是透明底的圖片 background-size 用來設定元素背景圖片的大小 contain 使背景圖在尺寸大於內容元素的情況下,得以完整呈現。

發表於 CSS | 發表迴響

Reset CSS

在CSS 前掛上這一段「Reset CSS」的語法,就可以輕鬆解決各大瀏覽器的差異 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, … 繼續閱讀

發表於 CSS | 4 則迴響