㈠ js和css如何設置背景全屏圖片不受垂直滾動條影響
設置圖片自適應。
首先設置一個div 用來裝 img ,div 的寬 為圖片的寬,一般使用百分百就可以了,例如
width:100%; 不要設置高度,讓圖片自動撐開高度。
然後設置 img 的 width:100%; display:block; 將標簽 img 設置為塊級元素。
這樣不管 div 的寬為多大,圖片都是根據 div 等比例縮放。
㈡ CSS中如何設拉伸背景圖片鋪滿屏幕
body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;或者background-size:100%;
}
(2)css背景圖片滿屏擴展閱讀:
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
編程工具
記事本:使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時,以.html為後綴名進行保存即可。
Dreamweaver:它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具,利用它可以輕而易舉地製作出充滿動感的網頁。
㈢ 在CSS中怎用設置可以使背景圖片全屏顯示
background: url(ab.gif) repeat; //背景為ab.gif,橫向、縱向平鋪
① 如果是做網站的水印背景,可以放到body里,
② 如果是做頁面的背景,放到最外層的div里,
比如:
① body{background: url(ab.gif) repeat;margin:0px auto;}
② .box{background: url(ab.gif) repeat;margin:0px auto;}
單純橫向平鋪:repeat-x
單純縱向平鋪:repeat-y
不平鋪:no-repeat
㈣ css怎樣讓背景充滿整個屏幕
HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
給body標簽指定背景圖,這樣背景圖就可以填充整個瀏覽器viewport了。
其實,該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的,那麼背景圖將自動伸縮,充滿整個容器。
CSS body標簽的樣式如下:
body {
/* 載入背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時,背景圖像的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設置背景顏色,背景圖載入過程中會顯示背景色 */
background-color: #464646;
}
上面最重要的一條就是:
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高(在上面的例子中,就是body標簽)。
這里需要注意的一點就是:如果背景圖小於body標簽的尺寸(例如在高解析度顯示器上,或頁面內容特別多時),瀏覽器會拉伸圖片。都知道,當把一個圖片拉伸時,圖片會變模糊。
因此,在選擇背景圖時,要特別注意尺寸。為了照顧到大尺寸屏幕,demo里用的圖片尺寸為5498px * 3615px 。
同時,為了讓背景圖始終相對於viewport居中,聲明了:
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來需要解決的問題是:當內容的高度大於viewport的高度時,會出現滾動條。希望背景圖始終相對於viewport固定,即使用戶滾動時也是一樣。
解決辦法就是:
background-attachment: fixed;
㈤ 怎樣才能把CSS里的背景圖片顯示全屏呢
是背景圖片吧~~會用
Macromedia
Dreamweaver
改嗎~~?下面有個頁面屬性~點開~有個背景圖片選項,下面有個重復的選項~你自己試下~還有具體的話就是在窗體的右邊有個CSS選項~點開~有個BODY~~點開~在背景裡面改~~但是最終的問題是你的圖片大小和原來的不一致~重疊了就
不好看
了~~
㈥ div+css如何控制背景圖片全顯示出來
可以使用:Background-size屬性
語法:background-size:
[<length>|<percentage>| auto ]{1,2} | cover | contain
取值:<length>:
由浮點數字和單位標識符組成的長度值。不可為負值。
<percentage>:
取值為0%到100%之間的值。不可為負值。
(6)css背景圖片滿屏擴展閱讀:
DIV+CSS的合理之處在於可以進行網頁的統一設計管理,通過一個樣式表,牽一發而動全身,只要修改樣式表,就可以統一全站的風格,如果為一個頁面單獨做一個樣式表,或者一個div就做一個樣式表,沒有全局設計觀念,那麼這個div+CSS的設計方式就完全沒有必要,甚至成了累贅。
精簡的代碼,使用DIV+CSS布局,頁面代碼精簡,這一點相信對XHTML有所了解的都知道。代碼精簡提高了網路蜘蛛的爬行效率以及高效性,能在最短的時間內爬完整個頁面,同時這樣對收錄質量有一定好處。
div+css結構清晰,很容易被搜索引擎搜索到,天生就是適合優化seo,降低網頁大小,讓網頁體積變得更小。注意:div+css結構清晰、精簡,不意味著可以全部用div+css結構,比如通篇HTML標簽全DIV的,貌似除了<head>之上及<body>之上及之外。
其它全是<div>,就如同整個HTML是一萬個毫不相乾的內容拼裝起來,或者通篇是<div><ul><li>結構的,就如同這個頁面所有元素全是列表。事實上這兩種情況還相當普遍,因為曲解了「DIV+CSS」的真實含義,因為一個完整頁面幾乎不可能僅僅DIV+CSS就能完成。
㈦ css 如何把背景圖占滿整個屏幕
background: url(../images/login/theme4.jpg)centercenterno-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100%;background-size的屬性可以調整試試cover,100%等
㈧ css怎麼讓背景圖全部鋪滿
背景圖全部鋪滿:background-size:100% 100%
如果不是純色或者圖片大小和要填充的盒子大小相差不大的時候,100%可以看到全圖但是有時候會變形,建議不要使用100%;可以改用cover,cover是按比例放大,超出盒子部分裁剪,圖片不會變形但是有時候不能完全看到全圖
㈨ css背景圖片如何設置全屏
如果你是給body設置的背景的話,可以在加一個屬性
background-size:100%;這樣就全屏了。