『壹』 css何時用img,何時用背景圖片
在什麼情況下更適合使用HTML IMG標簽來顯示一個圖像,而不是一個CSS有背景圖像,反之亦然?
如下場景使用img標簽比較合適:
1、如果圖像是等內容的一部分或圖表或人(真正的人,而不是股票圖人),使用Img標簽加上alt屬性。
2、如果你想列印頁面並且你想要的圖像包括默認情況下使用IMG。
3、使用IMG(alt文本)圖像有一個重要的語義時,比如一個警告圖標。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。
4、如果你依賴於瀏覽器縮放圖像比例並且可以呈現不錯的效果時使用IMG。
5、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG。
6、使用img代替有背景圖像可以顯著提高性能的動畫背景。
7、IMG會首先載入因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像,載入樣式表載入後,延遲載入的網頁。
如下場景使用background-image屬性比較合適:
1、如果圖像不是內容的一部分時使用backgrond-image。
2、當圖像代替文本使用時使用backgrond-image。
3、如果你想列印頁面並且你不想要的圖像包括默認情況下使用backgrond-image。
4、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image。
5、如果你只需要展示圖像的一部分通過CSS sprites,時使用backgrond-image。
6、如果你需要為不同的屏幕解析度展示不同的圖像使用 media查詢時使用backgrond-image。
『貳』 網頁設計背景和圖片背景的關系
呵呵 問題很奇怪啊
你可能不是想做華麗的大網頁,只是想把你的圖片背景弄成網頁的背景,那隻要對該圖片進行編輯就可以了,用PHOTOSHOP打開圖片,將你網頁的背景復制進去,將你要修改的圖片至於背景之上,然後將圖片本身的背景用魔術棒選擇進行剪切,之後另存為JPG格式的圖片就可以了,剪切的時候需要仔細,再多說就是PHOTOSHOP教程的事了.
也可以直接儲存成透明的GIF格式的圖片
如果是要做一個華麗的網頁,網頁開啟速度會很慢,如果忽略開啟速度的話,你可以用PHOTOSHOP畫一個網頁,包括你在屏幕上所有能看到的地方都可以畫,甚至可以畫成一個房間,一個公園等等,然後用PHOTOSHOP帶的ImageReady,儲存優化結果,輸出的就是一個網頁,當然,這個網頁上邊是一個大圖片,你把這個圖片從網頁上去掉,然後把這個圖片設置成背景.
如果你用ImageReady很熟練,可以製作切片,將每個部分都切割成小圖,選擇所有切片,儲存優化結果後在將圖片都改成背景,這樣可以增加傳輸速度,不過剪切的不要太小,最好是邊框剪下來,每個欄目剪切成一個,每個連接剪切一個,反正是剪切的要細致,要認真,切記要放大了剪切,精確到像素.
不用擔心圖片對不上,網頁會跟你畫的一模一樣,而且改成背景後,還可以再它上邊再添加圖片,因為每個圖片都已經劃分好表格了.
以上所做出的效果可能還不如意,主要是切片和網頁內容的距離,你可以在表格中再創建表格,至於距離什麼的你沒問,應該會吧,top left right等.
至於水印,方法非常多,簡單點的就是把圖片的透明度調成20%左右,也可以通過濾鏡,製作出立體感覺,也可以將圖片去色,復制到通道,在通道中選擇選區,然後用一種喜歡的顏色填充
『叄』 設置網頁中的背景圖片
方法一:在HTML文件中設置
HTML的中有兩個關於背景的屬性,其中的background用來設置背景圖片。示例如下:
如果背景圖片小於網頁顯示窗口,那麼這個背景圖片會自動重復。
為保證瀏覽器載入網頁的速度,建議盡量不要使用位元組過大的圖片作為背景圖片。
可以參考這個網站的教程和示例:
http://www.blabla.cn/html_tutorials/045_html_bgcolor_background.html
方法二:在CSS文件中設置
CSS的背景圖片屬性
示例:
可以參考這個網站的教程和示例:
http://www.blabla.cn/css_tutorials/020_css_background.html
參考資料:
http://www.blabla.cn/html_tutorials/index.html
『肆』 網頁上背景和圖片怎麼區分
打開你的網頁,點擊瀏覽器上面查看菜單,選擇查看源文件。
再源文件中查找你所看到的圖片名稱(圖片名稱可在網頁中點滑鼠右鍵屬性看到),如果這個圖片名稱出現在<img>中,它就是一個普通圖片,如果出現在<background>中,它就是背景。
其實背景也是圖片不過使用在了專門的位置,比如網頁整體背景、表格背景、層背景等。
『伍』 網頁製作中,使用的背景圖片有什麼要求
沒啥特殊要求,圖片夠大,你自己喜歡就行,網路圖片頻道,搜『桌面』,『美圖』,都有不少選擇
『陸』 WEB標准顏色到底什麼時候使用,是上傳到網上的圖片,還是在寫網頁時設置背景色之類的時候
用到顏色代碼,一般在設置文字的顏色、網頁的背景色、滑鼠懸停等地方會用到顏色。圖片就是圖片,不會用到顏色代碼。
『柒』 網頁布局什麼時候用圖片背景,什麼時候用img標簽
一般固定圖片,那種小圖標都是用都是用做背景background,最近background-attachment:fixed;這個屬性挺火的,圖片固定不動可以有點視覺錯覺。活動的圖片如案例新聞圖片就要用img標簽。這樣程序要才好套用程序
『捌』 網頁設計的時候針對圖片有什麼要求
網頁設計與一般的平面設計對圖片的要求不同,網頁中圖片不需要很高的解析度,因此在製作網頁圖片時有很大的自由空間。但在網頁中使用圖片時,上海志勛網路提醒您,有以下幾點應該注意。
1、圖片文件的大小是我們上海志勛網路網頁設計人員必須考慮的問題,因為瀏覽者在下載較大的圖片時往往需要花費大量的時間,這樣,網站打開速度也會變慢,太長時間的等待將影響到瀏覽者的瀏覽意願.因此應該對較大的圖片文件進行適當的壓縮和切割。
2、圖片不只是網頁設計中裝飾性的點綴,它可以幫助志勛網路設計員傳達網頁要表現的內容,所以在選擇圖片時,應該挑選與網頁主網站主題有關聯性的圖片。
3、對於網站的標志圖片,主體應該清晰可見,圖形的含義最好簡單明了,圖片內所含的文字應該清楚且容易辨認。
4、如果將圖片作為網頁設計背景,最好選用淡色系列的圖片,這樣有助於網頁的整體和諧.背景圖片像素值越小越好,建議使用寬均很小的圖片來製作可以拼接的背景圖,這樣不僅可以大大減少文件尺寸,又可以使頁面顯得美觀.志勛網路提醒您:背景圖片只是用來襯托圖片主題的,切忌過於花哨。
『玖』 html網頁製作中如何設置背景圖片(如何引用)
1、首先打開Atom編輯器導入項目文件夾,先創建一個index.html的文件。定義一下html文件的主信息: