Question

有没有在CSS的背景图片属性中设置html页面？

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

我的css

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

我在线搜索，似乎没有人曾经在这方面工作过。这周围有什么吗？谢谢你的帮助！

Answer 1

您可以抓取屏幕截图（例如how to save specific part of page as image using 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 个答案: