Ⅰ 怎樣在HTML里添加背景圖片
1、插入背景圖片有兩種方法,一種是用html的img標簽,另一種是利用css的background標簽插入。具體操作是首先新建一個html文件,寫入兩個div,分別用來演示兩種方法插入標簽:
Ⅱ 在html靜態網頁中如何插入背景圖片,急需!!!
用<img> 標簽。
代碼樣式:
<img src="xxx.jpg" width="100px" height="100px" />
代碼說明:
這是在網頁中插入一副圖像,能調整圖像大小,能拉伸圖像,但是不能平鋪圖像,圖像要佔用頁面的空間的,一般情況下,文字不能在這樣的圖像上面。
代碼標簽解釋:
1、<img> 標簽定義圖像。
2、src :要顯示的圖像的 URL(圖片地址)。
3、width:圖片寬度
4、height:定義圖像的高度。
5、px:即像素,1px代表屏幕上一個物理的像素點;
(2)img背景圖片擴展閱讀
一、img定義與用法:
1、img 元素向網頁中嵌入一幅圖像。
從技術上講,<img> 標簽並不會在網頁中插入圖像,而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的佔位空間。
2、<img> 標簽有兩個必需的屬性:src 屬性和alt 屬性。
二、必需的屬性:
1、alt text 規定圖像的替代文本。
2、src URL 規定顯示圖像的 URL。
Ⅲ 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。
Ⅳ img標簽如何作為背景
1、打開Dreamweaver創建新頁面,點擊下方頁面屬性來編輯製作背景。
Ⅳ html5怎麼設置整頁背景圖片
html5中設置整頁背景圖片的方法是利用css3樣式:
寫法如下:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
效果如: