<html>
<head>
<title>test</title>
<style type="text/css">
#bodybg {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 0;
}
#bodybg .stretch {
width:100%;
height:100%;
}
</style>
</head>
<body>
<!-- 背景图片自适屏幕分辨率 -->
<div id="bodybg">
<img src="http://192.168.0.245/darling/static/images/bg2.jpg" class="stretch" />
</div>
</body>
</html>
<style type="text/css">
div{
width:100%;
height: 500px;
background-image:url('2.png');
background-size:cover;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='2.png')
}
</style>
<body>
<div></div>
</body>
使用滤镜，其中 sizingMethod="scale" 就是拉伸。
分享到：
相关推荐
【使用jQuery和CSS将背景图片拉伸】 在网页设计中，使用大背景图片可以增加视觉冲击力和美感，而背景图片的拉伸效果则可以使图片适应不同尺寸的浏览器窗口，保持页面的整体美观。本文主要介绍如何通过jQuery和CSS来...
要实现背景图片拉伸，可以使用CSS3的`background-size`属性。这个属性允许我们精确控制背景图片的尺寸。有多种值可以选择，但在这里，我们关注的是"cover"和"contain"这两个值。 1. `background-size: cover`: 这个...
在CSS2.1规范中，我们主要依赖`background-repeat`属性来控制背景图片的显示方式，如`repeat`、`repeat-x`、`repeat-y`和`no-repeat`，但这些方式无法实现背景图片的拉伸填充，导致图像可能在容器内重复显示，或者不...
这种技术主要用于解决传统背景图片在缩放时可能出现的失真问题，尤其是在响应式设计中，它能确保图像在各种设备上都有良好的展示。 九宫格背景图的原理基于图像分割与CSS3的背景定位。首先，我们将一个复杂的背景...
ASP.NET中把背景图片拉伸 在ASP.NET中，我们可以使用background-image属性来设置背景图片，并使用background-repeat属性来实现背景图片的平铺。 例如： ```css body { background-image: url('a.jpg'); ...
特别是，当需要将背景图片拉伸以铺满整个页面或页面的某个元素时，这一需求变得尤为突出。在本次的示例中，我们将探讨如何使用CSS来实现背景图片的拉伸铺满效果。 首先，我们注意到示例中使用的CSS选择器`#img`，这...
本篇文章主要探讨如何利用jQuery和CSS技术实现背景图片的拉伸效果，以适应不同浏览器窗口尺寸的变化，营造类似电脑桌面壁纸的效果。在讲解之前，需要明确一点，背景图片的平铺可以通过CSS的`background-repeat`属性...
在CSS3中，背景图片的显示位置是一个非常重要的概念，特别是在网页设计中。它允许开发者精确控制元素背景图像的位置，从而实现各种视觉效果。本文将深入探讨如何使用CSS3来指定背景图片的位置，并通过实际示例来阐述...
在网页设计中，我们经常遇到一个挑战：如何确保一个`div`元素的背景图片能够完美地100%平铺，无论用户是使用桌面浏览器还是移动设备浏览，都能看到完整且适应的背景。这个问题通常源于浏览器对CSS样式的不同解析方式...
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。 首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...
《jQuery与CSS3结合实现背景图片拉伸切换特效解析》 在现代网页设计中，动态效果的运用可以提升用户体验，使网页更具吸引力。本篇文章将深入解析如何利用jQuery和CSS3技术实现一种特殊的背景图片点击后向上拉伸切换...
但是，随着现代浏览器对CSS3特性的广泛支持，更推荐使用CSS的`background-size`属性来实现背景图片的自动拉伸，因为这种方式更加简洁、高效且易于维护。 #### 5. 总结 通过上述分析可以看出，尽管使用JavaScript...
如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果...
首先，我们来看一下CSS背景图片自适应。在网页设计中，我们常常希望背景图片能够根据浏览器窗口的大小自动调整，以保持图片的完整性或者适应性。这可以通过设置`background-size`属性来实现。`background-size`有...
总的来说，`background-size`属性是CSS3中的一个实用工具，它提供了灵活的方式来控制背景图片的显示方式，包括实现背景图片拉伸覆盖整个元素区域的效果，这样设计者就能创造出更具吸引力的页面布局和视觉效果。
在网页设计中，`div` 和 `css` 是两个至关重要的元素。`div` 是一个HTML（超文本标记语言）的容器元素，用于组织页面结构，而CSS（层叠样式表）则是用来控制网页外观和布局的语言。在这个主题中，我们将深入探讨如何...
首先，要实现背景图片的自适应拉伸，需要理解CSS中的定位属性以及如何将图片设置为网页的背景。通过使用`position: fixed;`和`position: absolute;`可以使图片固定在页面的特定位置。`width: 100%;` 和 `height: 100...
本文将介绍两种实现网页背景图片拉伸的方法，一种通过CSS属性来实现，另一种利用jQuery动态调整图片尺寸。 首先，我们来探讨第一种方法，即使用CSS的`background-size: cover`属性来实现图片的拉伸效果。`...