0

无论如何在CSS的背景图像属性中设置一个html页面？

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

我的 CSS

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

我在网上搜索过，似乎以前没有人做过这方面的工作。反正这周围有吗？谢谢您的帮助！

4

4 回答 4

2

您可以抓取屏幕截图（例如如何使用 JavaScript 将页面的特定部分保存为图像）并在 CSS 中引用生成的图像

于 2013-05-01T20:42:27.710 回答
1

好吧，我同意其他所有人的观点，这不是一件好事，而且以前没有人研究过它是有原因的。

也就是说，我能够以相当少的努力让它正常工作。截图将是最好的答案（我仍然怀疑应该这样做，但是嘿你可能有一个特殊的原因）。

所以最基本的事情是在你的 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>. 几乎把所有东西都放在里面，并像往常一样设计它。我得到了一个不错的相对定位的、基于浮动框的布局，没有问题。

于 2013-05-01T21:04:11.107 回答
1

没有办法做到这一点。

理论上有几种方法（必须测试，我会回复你），但这是一个可访问性的噩梦。

您最安全的选择是截取您想要作为背景的页面的屏幕截图。

于 2013-05-01T20:40:49.127 回答
0

你不能用 CSS 属性 background-image 做到这一点。您可以使用绝对定位和 z-index 将 HTML 内容叠加到其他 HTML 内容（如背景图像）上，但这是一种解决方法，在大多数情况下没有多大意义。

于 2013-05-01T20:39:33.483 回答