如何拉伸背景图像以适应网页,厦门网站建设简述实现技巧

网站设计图像是有吸引力的网站设计的重要组成部分。这包括使用背景图像。这些是在页面区域后面使用的图像和图形,而不是作为内容页面的一部分呈现的图像。这些背景图片可以增加页面的视觉兴趣,并帮助您实现您可能在页面上寻找的视觉设计。 如果您开始使用背景图片,则无疑会遇到想要图片展开以适应页面的场景。 对于正在交付到各种设备和屏幕尺寸的响应式网站而言,情况尤其如此。 这种伸展背景图像的愿望是网页设计师非常普遍的愿望,因为不是每个图像都适合网站的空间。不用设置固定大小,无论浏览器窗口有多宽或很窄,拉伸图像都可以弯曲以适应页面。 拉伸图像以适应页面背景的最佳方式是使用CSS3属性作为背景大小。这是一个使用背景图片作为页面主体的示例,它将大小设置为100%,以便它始终伸展以适合屏幕。 body { background: url(bgimage.jpg) no-repeat; background-size: 100%; } 据caniuse.com称,该属性适用于IE 9+,Firefox 4+,Opera 10.5+,Safari 5+,Chrome 10.5+以及所有主流移动浏览器。这涵盖了今天可用的所有现代浏览器,这意味着您应该使用此属性,而不必担心它不会在某个人的屏幕上工作。 在较旧的浏览器中放大背景 您不太可能需要支持比IE9更早的浏览器,但我们假设您担心IE8不支持此属性。在这种情况下,您可以伪造延伸的背景。您可以使用Firefox 3.6()和Opera 10.0()的浏览器前缀。-moz-background-size-o-background-size 伪造延伸背景图像的最简单方法是在整个页面上展开。然后,你不会因为额外的空间,或者不必担心你的文本适合在拉伸区域。以下是如何做到这一点: id=”bg” /> 首先,确保所有浏览器都有100%的高度,0边距和0 HTML BODY元素上的填充。将以下内容放在HTML文档的头部: 将您想要成为背景的图像添加为网页的第一个元素,并将其设置id为“bg”: 定位背景图像,使其固定在顶部和左侧,宽100%,高100%。将其添加到您的样式表中: img#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%;} 将所有内容添加到DIV具有id“内容” 的元素的页面内。添加DIV下面的图像: All your content here – including headers, paragraphs, etc. 注意:现在查看您的网页很有意思。图片应该展示出来,但是您的内容完全缺失。为什么?由于背景图像高度为100%,并且内容分区位于文档流程中的图像之后 – 大多数浏览器都不会显示它。 放置您的内容以使其相对并且具有z-index1.这将使其在符合标准的浏览器中位于背景图像之上。将其添加到您的样式表中: #content { position: relative; z-index: 1;} 但是你没有完成。Internet Explorer 6不符合标准,仍然存在一些问题。除了IE6之外,还有很多方法可以隐藏每个浏览器的CSS,但最简单(也是最不可能导致其他问题)的方法是使用条件注释。将以下样式表放在文档头部: 在突出显示的评论中,添加另一种样式表以获得更好的IE 6播放效果: 请务必在IE 7和IE 8中进行测试。您可能还需要调整评论以支持他们。但是,当我测试它时,它就起作用了。 好的 – 这是无可厚非的。很少有网站需要支持IE 7或8,远不止IE6!  因此,这种方法过时了,可能对您不必要。我把它留在这里,更多的是作为好奇心的模型,以至于在我们所有的浏览器都很好地结合在一起之前,有多困难的事情! 在较小的空间上粘贴伸展的背景图像 您可以使用类似的技术DIV在网页上的一个或另一个元素上伪造延伸的背景图像。这有点棘手,因为您必须使用绝对定位或对页面的其他部分有奇怪的间距问题。 将图像放在我想用作背景的页面上。 在样式表中,为图像设置宽度和高度。请注意,您可以使用百分比来表示宽度或高度,但我发现使用长度值调整高度更容易。 img#bg { width: 20em; height: 30em;} id像上面所做的那样,将您的内容放在一个带有“内容” 的div中: All your content here 将内容div设置为与背景图像相同的宽度和高度: div#content { width: 20em; height: 30em;} 然后将内容放置到与图像相同的高度。所以如果你的图像是30em,你会有一个顶部样式:-30em; 不要忘记将内容的z索引设置为1。 #content { position: relative; top: -30em; z-index: 1; width: 20em; height: 30em;} 然后为IE 6用户添加-1的z-index,如上所示: 再次,随着背景尺寸享受现在广泛的浏览器支持,这种方法也很可能不必要,并作为过去时代的产品呈现。如果您确实想要使用这种方法,只需确保在尽可能多的浏览器中进行测试即可。 如果您的内容更改大小,则需要更改容器和背景图片的大小,否则最终会出现奇怪的结果。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 如何拉伸背景图像以适应网页,厦门网站建设简述实现技巧
分享到:
赞(0)
广告位820*80