當前位置:首頁 » 背景圖片 » css背景圖片鋪滿
擴展閱讀
什麼軟體可以做柯南圖片 2024-10-26 08:18:53
醫生建議休息多少天圖片 2024-10-26 08:18:51
畫畫手賬圖片素材 2024-10-26 08:10:27

css背景圖片鋪滿

發布時間: 2022-02-07 00:03:43

❶ 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 使背景圖片覆蓋整個頁面

覆蓋整個頁面也就需要圖片占據整個屏幕或者占據整個html元素;
在css3出來之後,有一個屬性background-size;
這個屬性可以給背景圖片設置大小,當值為100% 100%的時候也就是說把圖片寬高都設置成百分百,然後元素有多大,圖片就會伸展多大,也就是說的整個頁面

❸ html css 如何一張圖片鋪滿整個背景,不留空白的。並且圖片是固定的

(1)body{background:url(背景圖) repeat;} 說明:repeat表示背景圖的平鋪方式!其實一般你將一張圖片作為背景時,會默認為平鋪,所以不需要刻意去設置,相反如果我們不想圖片平鋪那麼這時就需要設置為no-repeat;這時圖片就會按原來的尺寸顯示!
(2)如果圖片過小,那麼圖片平鋪就會出現重復的地方,其實和把一張圖片設置為桌面牆紙類似! 我試過了,想要想鋪滿但是不重復的話選擇一張1024X768的圖片,當然這只是針對顯示器為1024X768的! 具體選擇就看你顯示器的解析度了!

❹ css設置div背景圖,沒法鋪滿的情況

我自己測試了一下,因為沒有別的div的樣式數據,所以看不出問題在哪裡

你的問題可能是上一級的css影響的,另外我建議你給span也加上樣式

❺ html 怎麼讓背景圖鋪滿整個頁面

下面這段代碼給div設置了一個寬度和高度,然後添加了一張背景圖片,並使用了background-size:cover;這個屬性,就會自動放大或縮小背景圖片來適應,但是需要指出的是這個屬性在需要在IE9及以上版本支持,谷歌和火狐都支持,具體支持情況看上面的圖,淺綠的代表支持,粉紅的不支持,你也可以到caniuse.com自己查看支持性


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;"charset="utf-8">

<title>無標題文檔</title>

</head>

<styletype="text/css">

.div1{width:500px;height:600px;background:url(images/class_nav.jpg);background-size:cover;}

</style>

<body>

<DIVclass="div1"></div>

</body>

</html>

❻ html和css如何做到讓一張圖片鋪滿屏幕呢

比如<img id='bg' src='bg.jpg'/>

#bg{
position:fixed;

width:100%;

height:100%;

}

❼ CSS中如何設拉伸背景圖片鋪滿屏幕

body{

background: url("image.png") no-repeat;

height:100%;

width:100%;

overflow: hidden;

background-size:cover;或者background-size:100%;

}

(7)css背景圖片鋪滿擴展閱讀:

CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。

編程工具

記事本:使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時,以.html為後綴名進行保存即可。

Dreamweaver:它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具,利用它可以輕而易舉地製作出充滿動感的網頁。

❽ css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法:

background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(8)css背景圖片鋪滿擴展閱讀:

CSS背景圖片自適應、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

❾ CSS 在<div>中設置背景圖片不能充滿整個頁面

請問您是要問「CSS 在<div>中設置背景圖片不能充滿整個頁面」,還是「層的四周都不會緊貼頁面邊緣」?如果是前一個,可以這樣修改:
.backdiv{
background-image:url(Background.png);
background-repeat:repeat;
}
如果是後一個,請把問題說清楚一點!

❿ 如何讓css背景圖片占滿全部背景,並且隨著瀏

設置背景圖片所在div的寬高為100%,就能隨屏幕大小變化而變化