如何將html頁面設置為背景圖像？

Question

無論如何，在CSS的背景圖片屬性中設置了html頁面？

下面的CSS是我需要的結果，但我知道它不起作用。

我的CSS

background-image:url(http://mydomain/project/test.html);

我已經在網上搜索，似乎以前沒有人對此進行過研究。 反正周圍有嗎？ 謝謝您的幫助！

Answer 1

您可以抓取屏幕截圖（例如，如何使用JavaScript將頁面的特定部分保存為圖像），並在CSS中引用生成的圖像

Answer 2

沒辦法。

從理論上講，有兩種方法可以進行測試（必須測試，我會盡快與您聯系），但這是可訪問性的噩夢。

您最安全的選擇是將所需頁面的屏幕截圖用作背景。

Answer 3

好的，我同意其他所有人的看法，這並不是一件好事，並且有一個理由以前沒有人對此進行過努力。

就是說，我能夠用很少的努力使它正常工作。 截屏是最好的答案（我仍然懷疑應該這樣做，但是嘿，您可能有特殊的原因）。

因此，基本操作是在HTML中設置一個iframe，一個div使其停止活動，並在其上再設置一個div來容納您的內容。 所有絕對定位。

您的HTML如下所示：

<!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" xml:lang="en"lang="en" ><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" />

<title>Template</title>

</head><body>
    <div class="content">
        <p>Content goes here</p>
    </div>
    <div id="background"></div>
    <iframe  src="http://bing.com" />
</body></html>

還有你的CSS：

*{margin:0;padding:0}


#background{
    position:absolute;
    background-color:#fff;
    color:#fff;
    opacity:0;
    filter:alpha(opacity=0);
    width:100%;
    height:70em;
    z-index:10;
}

.content{
    position:absolute;
    width:100%;
    height:70em;
    z-index:20;
    color:#fff;
}

iframe{
    position:absolute;
    border:none;
    z-index:0;
    width:100%;
    height:70em;
    overflow:hidden;
}

將內容放入<div class="content">將成為新的<body> 。 幾乎像往常一樣將所有內容放入其中並進行樣式設置。 我有一個不錯的相對定位的，基於浮動框的布局，沒有問題。

Answer 4

您不能使用CSS屬性background-image做到這一點。 您可以使用絕對定位和z-index將HTML內容疊加到其他HTML內容（例如背景圖片）上，但這是一種解決方法，在大多數情況下，這樣做沒有多大意義。

如何將html頁面設置為背景圖像？

問題描述

4 個解決方案

解決方案1
2 2013-05-01 20:42:27

解決方案2
1 2013-05-01 20:40:49

解決方案3
1 2013-05-01 21:04:11

解決方案4
0 2013-05-01 20:39:33

如何將html頁面設置為背景圖像？

問題描述

4 個解決方案

解決方案1 2 2013-05-01 20:42:27

解決方案2 1 2013-05-01 20:40:49

解決方案3 1 2013-05-01 21:04:11

解決方案4 0 2013-05-01 20:39:33

解決方案1
2 2013-05-01 20:42:27

解決方案2
1 2013-05-01 20:40:49

解決方案3
1 2013-05-01 21:04:11

解決方案4
0 2013-05-01 20:39:33