❶ HTML網頁文檔中怎麼設置背景圖片全屏顯示,且能隨著解析度改變而改變
<style type="text/css">
body{FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='a.jpg',sizingMethod='scale');
margin0px;
}
</style>
這是全屏的背景代碼~
這個不管圖片多大尺寸都是滿屏,也就是拉伸圖片,會變形,你可以設置簡單的背景,如斜紋一類的
❷ html背景圖片全屏設置,但是卻有白邊,而且圖片有些模糊
1、出現白邊是因為瀏覽器的內或者外邊距默認值不為0:
你需要在head標簽里加上:
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
用以重置瀏覽器的內外邊距默認值,將默認值改為0。
2、至於圖片模糊,應該是你載入的圖片解析度不夠,或者你載入圖片的元素和圖片寬高比差距較大。
❸ html里,如何讓背景圖片根據屏幕大小鋪滿屏幕不重復
html里,讓背景圖片根據屏幕大小鋪滿屏幕不重復,具體方法如下:
1、首先我們用Dreamweaver軟體做一個html文檔,當然用其他編輯器也可以。
5、需要注意的是這是css3增加的新屬性,舊版本的瀏覽器可能不支持。所以有時需要更新瀏覽器。
❹ html頁面,怎麼設置全屏背景圖,在body外的,body內不包括該背景圖片!!!!!!
首先~還是給body設置背景~
然後再body裡面加一個層~~
把這個層定義成你想要的「body」的大小
-
-
~其實頁面你能看到的地方。都是在body里的。。
----------------------------
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>無標題文檔</title>
<style>
*{margin:0
auto;
padding:0
auto;}
body
{
background-color:#000}
#container
{
width:800px;
height:600px;background-color:#FFF}
/*這里高度是不用設的,只是DIV裡面沒內容,我就設了下高度,好看效果哈*/
</style>
</head>
<body>
<div
id="container">
</div>
</body>
</html>
❺ html中如何讓背景圖片全屏顯示。
直接在BODY裡面添加背景圖,背景圖寬至少要1920px的!
❻ HTML body設置全屏背景圖片問題
background-size:100% 100%;
更改成background-size:100%,100%;
前輩可能疏忽了,他的答案的是正確的。
❼ html中的背景圖片,一張全屏顯示
Background : 背景色
Background Image :選取你的背景圖
Reapeat : 背景圖是否重復,其中選no-repeat為不重復,repeat為重復,repeat-x和repeat-y分別為只在X和Y方向重復。
Attachment : 背景圖位置,fix為背景圖位置固定不變,scroll為背景圖隨頁面一同滾動
Horizontal : 為固定背景圖時圖在水平方向所居的位置,可以選擇居中,居左,居右或自己設定距左的距離。
Vertical : 為固定背景圖時圖在豎直方向所居的位置,可以選擇居中,居頂部,居底部或自己設定距頂的距離。
注意帶 * 的選項要在瀏覽器里才能看到效果。
設定完畢,對Dreamweaver左下角點選<body應用該CSS樣式就行了
不光是<body標簽,頁面里有的元素都可以在那裡選擇,可以很方便的選取應用對象。
對於所有onload 的觸發事件,也都可以選<body再加Behavior,比如drag layer或打開頁面後彈出窗口等等
background-attachment屬性控制背景圖象是否隨內容一起滾動,取值為scroll和fixed。默認值為scroll(滾動);fixed為靜止。
❽ html背景圖片設全屏
背景圖片你要設成全屏的話可以在CSS里定義:body{background:url(圖片的路徑) repeat;}注意,這里要用repeat鋪滿,它會往橫向縱向重復平鋪,如果你想只用單獨的這張圖片,你只能用作圖軟體把這個小圖片拉大成足夠的寬和高,但這樣會變形,不建議這樣做;
❾ html裡面怎樣讓背景圖片全屏,使用width和height來定義嗎,,
如果這張圖片為背景圖片由於背景圖片不具有伸縮性,只能通過別的方法繞著解決,在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,實現背景拉伸鋪滿整個瀏覽器,但其它的瀏覽器不支持。這時可以拐個彎,設置兩層div,底層div當做背景使用,放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面1方法是要求圖片不重復,但又得占滿瀏覽器所採用的方法。
❿ html5如何把一個圖片設為頁面的全屏背景
//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">
//CSS
#bg{
position:fixed;
top:0;
left:0;
/*Preserveaspetratio*/
min-width:100%;
min-height:100%;
}
或者
img.bg{
/*Setrulestofillbackground*/
min-height:100%;
min-width:1024px;
/*Setupproportionatescaling*/
width:100%;
height:auto;
/*Setuppositioning*/
position:fixed;
top:0;
left:0;
}
@mediascreenand(max-width:1024px){/*Specifictothisparticularimage*/
img.bg{
left:50%;
margin-left:-512px;/*50%*/
}
}
或者
//HTML-Fromqifeiye.com
<imgsrc="images/bg.jpg"id="bg"alt="">
/CSS
#bg{position:fixed;top:0;left:0;}
.bgwidth{width:100%;}
.bgheight{height:100%;}
//jQuery
$(window).load(function(){
vartheWindow=$(window),
$bg=$("#bg"),
aspectRatio=$bg.width()/$bg.height();
functionresizeBg(){
if((theWindow.width()/theWindow.height())<aspectRatio){
$bg
.removeClass()
.addClass('bgheight');
}else{
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});