堆棧內存溢出
  簡體   English   中英

在 HTML 或正文上實現背景圖像的最佳方法

[英]best way to implement background image on HTML or body

 原文  2015-01-14 08:58:53  3   11    html/ css

問題描述

我有一張需要拉伸全身的圖像，所以我不知道這樣做的最佳方法是什么

html{
  /*background image properties*/
}

或者

body{
  /*background image properties*/
}

11 個解決方案

解決方案1
 27 已采納  2015-01-14 09:08:04

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

這將是最好的方法，您可以將其應用於 HTML，這實際上取決於您喜歡什么...

background-image:url('../images/background.jpg');

假設您的 css 文件位於不同的地圖中，您可以執行 ../ 轉到放置 css 文件夾的地圖，然后進入圖像文件並選擇圖像。

background-attachment:fixed;

在設置背景圖像時，我個人喜歡使用它，這樣當用戶滾動時，背景圖像保持其當前位置。

background-repeat: no-repeat;

使用此設置時，它會使圖像不會重復，以防圖像太小或無法覆蓋整個背景。

background-size: cover;

當您應用此選項時，您會將背景大小設置為覆蓋，並結合no-repeat和attachment: fixed它是設置背景圖像樣式的好方法

解決方案2
 3  2015-01-14 09:08:21

根據此處的 CSS 2.1 規范： http : //www.w3.org/TR/CSS2/colors.html#background

但是，對於 HTML 文檔，我們建議作者為 BODY 元素而不是 HTML 元素指定背景。 對於根元素是 HTML“HTML”元素或 XHTML“html”元素的文檔，其 'background-color' 的計算值為 'transparent'，'background-image' 的值為 'none'，用戶代理必須改為使用在為畫布繪制背景時，從該元素的第一個 HTML“BODY”元素或 XHTML“body”元素子元素計算背景屬性的值，並且不得為該子元素繪制背景......

因此，建議在body上使用background （而不是在html ）。

如果您想要一個background-image來拉伸整個容器（即body ），那么您可以使用以下樣式：

background-size: 100% 100%;

如果要保留縱橫比，則可以使用cover使其覆蓋整個容器，或者使用contain將其保持在容器邊界內。 當您使用contain ，根據背景圖像的縱橫比，您可能會在圖像結束（信箱）下方或之后出現空白。

background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...

.

解決方案3
 1  2015-01-14 09:04:45

body{
  /*background image properties*/
}

這將是最好的方法，因為 body 是網頁上所有可見元素的直接父元素。

http://jsfiddle.net/hxyz2evq/

您可以使用background-size:contain; 用背景圖像覆蓋所有區域

body{
width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-cover;
    background-repeat:no-repeat;
}

注意：我還想到了一個案例：

<html>
    <head>
        some free data
    </head>
    <body>

    </body>
</html>

這里some free data將顯示在網頁內，即body ，所以我們不會關心將背景屬性賦予html tag ，

只使用body{//background properties }就可以了

Edit:

雖然這不是這里應該使用什么屬性的問題。 可以有各種各樣的事情，例如：

background-size:cover;
OR
background-contain;
OR
background-100% 100%;

適合您問題的最佳屬性是background-100% 100%;

解決方案4
 1  2018-09-05 09:48:57

 body{ background-image:url('../images/background.jpg'); background-attachment:fixed; background-repeat: no-repeat; background-size: cover; }

解決方案5
 0  2015-01-14 09:00:08

在語義上，我會在 body 中使用。

body{
  background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}

語義上似乎適用於全身。

解決方案6
 0  2015-01-14 09:04:16

您應該定位body標記並將background-size屬性應用到它。

像這樣

body{
background-size: 100%;
}

解決方案7
 0  2015-01-14 09:08:31

您可以使用

body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}

解決方案8
 0  2015-01-14 09:17:46

試試這個代碼：

<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>

示例：檢查這個

解決方案9
 0  2017-12-28 01:02:45

CSS3 background-size:cover 屬性可以很好地處理全屏背景圖像，包​​括響應度。 以下內容適用於我測試過的所有桌面和移動設備。

body { 
    background-image: url(/assets/img/yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}

解決方案10
 0  2019-11-14 18:03:40

background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;


body {
    background-image: url(/_assets/img/zoom-17536689-3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

解決方案11
 0  2019-12-02 05:24:18

 .bk { background: url('../assets/imgs/img.jpg') no-repeat center center fixed; }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML CSS使用背景圖片的最佳方法 Html 正文背景圖片 HTML中人體背景的可縮放圖像 擴展身體背景圖片/身體不如html高 在html中找到body標記結束的最佳方法 使 HTML 正文背景圖像透明 HTML 正文背景圖像未覆蓋所有頁面 實現 HTML5 視頻的最佳方法 懸停更改CSS背景圖像的最佳方法 在RWD主題中添加背景圖像的最佳方法
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM