㈠ 請幫我看看這個CSS要怎麼改圖片才滿屏
圖片為何設置為h3的背景?
圖片是要時刻固定在可視窗口還是只要它能撐開全屏?
回答1:h標簽系列一般用於標題,若背景是鋪滿整個標簽的,用div合適一點,如果是有部分是是文字部分是背景圖,那選擇標簽可以隨意一點
回答2:如果是只撐滿全屏,直接設置寬高百分比即可;若是固定於可視窗口,即可在body直屬div,設置div寬高鋪滿全屏,再設置定位為固定定位,然後引入背景圖片,設置background-size即可,具體細節的微調,你可以自己慢慢嘗試,嘗試多了,你對各個屬性才會有深入的了解
㈡ css圖片一屏怎麼設置
把圖片<imgsrc="..."/>轉化成背景圖片
background-image:url(...);
background-size:cover;
或者在頁面載入完成和窗口大小改變時用js獲取當前瀏覽器高度,將img高度設置成瀏覽器高度即可
㈢ css怎麼讓背景圖全部鋪滿
背景圖全部鋪滿:background-size:100% 100%
如果不是純色或者圖片大小和要填充的盒子大小相差不大的時候,100%可以看到全圖但是有時候會變形,建議不要使用100%;可以改用cover,cover是按比例放大,超出盒子部分裁剪,圖片不會變形但是有時候不能完全看到全圖
㈣ css 如何讓圖片全屏的問題
css設置背景圖片全屏,如果只是將其當做一張圖片顯示,可以通過css控制。超大圖片,引入進來即可根據大小縮放。
如果這張圖片為背景圖片由於背景圖片不具有伸縮性,只能通過別的方法繞著解決,在ie中可以用,實現背景拉伸鋪滿整個瀏覽器,但其它的瀏覽器不支持。
㈤ CSS中如何設拉伸背景圖片鋪滿屏幕
body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;或者background-size:100%;
}
(5)css怎麼設置圖片滿屏擴展閱讀:
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
編程工具
記事本:使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時,以.html為後綴名進行保存即可。
Dreamweaver:它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具,利用它可以輕而易舉地製作出充滿動感的網頁。
㈥ css背景圖片如何設置全屏
如果你有一張比較絢爛的圖片想做背景,可以這樣設置:
代碼如下:
body{
background:url(img.jpg);
background-position:center;
background-repeat:no-repeat;
}
但效果很可能會是這樣:
圖片沒有重疊,居中,並且...她太小了,無法佔領全部的頁面。
很可惜,CSS2中並沒有圖片全屏拉伸的屬性,所以我自己想了個辦法。
利用一個DIV層,在裡面裝載一個IMG標簽。然後設置DIV和IMG的大小為100%,並固定到屏幕最底層,這樣就實現了完美的拉伸並最大化圖片的目的。
首先在Body中加入下面的代碼:
代碼如下:
<div
id="div1"><img
src="img.jpg"
/></div>
然後加入CSS代碼:
div#div1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
div#div1
>
img
{
height:100%;
width:100%;
border:0;
}
最終效果:
拉伸瀏覽器、調整網頁位置後,圖片背景圖片依然居中全屏:
火狐狸中的效果:
這樣,我們實現了固定居中且自動拉伸全屏的背景圖片,不過她是一個層,所以當用戶在頁面空白處右鍵的時候,顯示的就是圖片的信息,這可能會讓用戶感覺不方便。
實際上,火狐的拉伸效果比IE強很多,會自動羽化圖片的細節。IE在圖像拉伸後的像素點非常難看,所以建議用高分辨的圖像作為背景。
新手向,高人請指導,謝謝。
㈦ 怎樣才能把CSS里的背景圖片顯示全屏呢
是背景圖片吧~~會用
Macromedia
Dreamweaver
改嗎~~?下面有個頁面屬性~點開~有個背景圖片選項,下面有個重復的選項~你自己試下~還有具體的話就是在窗體的右邊有個CSS選項~點開~有個BODY~~點開~在背景裡面改~~但是最終的問題是你的圖片大小和原來的不一致~重疊了就
不好看
了~~
㈧ css怎麼讓一張圖片適應任何屏幕大小的電腦平鋪
1、橫向鋪滿,縱向留有空隙或超出屏幕:
body {background:url(圖片路徑) no-repeat center; background-size:100% auto;}
2、縱向鋪滿,橫向留有空隙或超出屏幕:
body {background:url(圖片路徑) no-repeat center; background-size:auto 100%;}
補充說明:background-size屬於css3,只有支持css3的瀏覽器才有效。
㈨ 在css里如何讓背景圖片在不同的屏幕上都完全顯示出來,怎麼設置百分比
可以使用:Background-size屬性
語法:
background-size :[ <length> | <percentage> |
auto
]{1,2}
|
cover
|
contain
取值:
<length>:
由浮點數字和單位標識符組成的長度值。不可為負值。
<percentage>:
取值為0%到100%之間的值。不可為負值。
說明:
設置背景圖片的大小。
指定背景大小,以象素或百分比顯示。當指定為百分比時,大小會由所在區域的寬度、高度,以及background-origin的位置決定。還可以通過cover和contain來對圖片進行伸縮。
示例代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background-size</title>
</head>
<body>
<div style="border: 1px solid #CCCCCC; padding:90px 5px 10px; background:url(http://webteam.tencent.com/wp-content/themes/teamblog/img/gg.png) no-repeat ; -webkit-background-size: 100% 80px; -o-background-size: 100% 80px; ">這里的 <code>background-size: 100% 80px</code>。 背景圖片將與DIV一樣寬,高為80px。</div>
</body>
</html>
㈩ css中如何將背景圖片全屏顯示
如果你是給body設置的背景的話,可以在加一個屬性
background-size:100%;這樣就全屏了。