拉伸和缩放 CSS 背景
Posted
技术标签:
【中文标题】拉伸和缩放 CSS 背景【英文标题】：Stretch and scale CSS background 【发布时间】：2010-09-27 10:28:18 【问题描述】：有没有办法让 CSS 中的背景拉伸或缩放以填充其容器？
【问题讨论】：
【参考方案1】：使用CSS 3 属性background-size：
#my_container
background-size: 100% auto; /* width and height, can be %, px or whatever. */
这适用于现代浏览器，自 2012 年以来。
【讨论】：
要保留图像的纵横比，您应该使用“background-size:cover;”或“背景尺寸：包含；”。我已经构建了一个在 IE8 中实现这些值的 polyfill：github.com/louisremi/background-size-polyfill 我知道这是一岁了，但我必须（笑并）同意“体面的浏览器”部分。检查你所有的浏览器，但我遇到的 IE 问题比任何一个都多。 我必须设置background-size: 100% 100%; 才能获得我想要的效果，如果这对其他人有帮助的话。
cover和containon MDN的解释
这实际上不起作用。问题是 fill 容器，这意味着我们希望它伸展，使其不再重复。另一方面，如果高度不覆盖该区域，则此答案将在高度方向上重复。 “拉伸填充”意味着拉伸，但是你必须这样做，所以它不会重复。正确答案是下面的“封面”。这实际上处理了 this 没有的情况。【参考方案2】：
对于现代浏览器，您可以使用background-size 来完成此操作：
body
background-image: url(bg.jpg);
background-size: cover;
cover 表示垂直或水平拉伸图像，使其永远不会平铺/重复。
这适用于 Safari 3（或更高版本）、Chrome、Opera 10+、Firefox 3.6+ 和 Internet Explorer 9（或更高版本）。
要使其与较低版本的 Internet Explorer 一起使用，请尝试以下 CSS：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
【讨论】：
致克莱门特：您对以前 IE 过滤器的建议：仅部分起作用。它可以缩放图片宽度，但是高度缩放会因为不限制任何东西而出错。页面越高，背景图片就越高.. =（我在 IE8 上试过这个。而且，它是否可以使用这些“封面”命令并以某种方式使其与 iphone 等手机兼容？我知道有视口问题，但是否可以将视口缩放到整个屏幕以在此处缩放背景？感谢您的回复！ 特定于 IE 的过滤器不是理想的解决方案，因此请随意使用 CSS 替代方案来适应 IE。我个人在自己的网站上使用 CSS3“封面”，它在 ios 设备上运行良好，只需确保定义设备宽度。 封面不会拉伸背景。 100% 100% 是的。 注意：从 Chromium 78.0.3904.97 开始，无法沿每个轴独立缩放 svg 图像。您可能需要将其放大并将其转换为光栅图像。 @Mike 如果您将preserveAspectRatio="none" 添加到 SVG 图像，它会起作用。【参考方案3】：
使用 CSS 缩放图像不太可能，但可以通过以下方式实现类似的效果。
使用这个标记：
<div id="background">
<img src="img.jpg" class="stretch" />
</div>
使用以下 CSS：
#background
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
.stretch
width:100%;
height:100%;
你应该完成了！
为了将图像缩放为“全出血”并保持纵横比，您可以这样做：
.stretch min-width:100%; min-height:100%; width:auto; height:auto;
效果很好！但是，如果裁剪了一个维度，它将仅在图像的一侧裁剪，而不是在两侧（并居中）均匀裁剪。我已经在 Firefox、Webkit 和 Internet Explorer 8 中对其进行了测试。
【讨论】：
这很好用......但正在寻找更强大的东西（可能使用javascript），它也可以根据图片是横向还是纵向来居中并进行调整。如果有人有这方面的解决方案会喜欢一个链接...谢谢！ 如果其他人有兴趣，这似乎效果很好：buildinternet.com/project/supersized 水平居中可以通过margin: 0 auto 和.stretch 完成。通过仅设置width 或height，纵横比保持不变。尝试使用max-width 和max-height 来限制缩放系数...
这在 ie8/ie9 中对我不起作用，但在 ie6/ie7（当然还有所有其他浏览器）中有效。在 ie8/ie9 中，图像只显示了大约 3/4 的 div。有人有同样的问题吗？
SO 的一个缺陷：无法标记不再正确的答案，导致像@Ullas 这样的人误入歧途。在所有现代浏览器中缩放背景都很容易。 developer.mozilla.org/en/CSS/background-size【参考方案4】：
在 CSS3 中使用 background-size attribute：
.class
background-image: url(bg.gif);
background-size: 100%;
编辑： Modernizr 支持 detection of background-size support。您可以使用编写的 JavaScript 变通方法，但您需要它并在没有支持时动态加载它。这将使代码保持可维护性，而无需针对某些浏览器使用侵入式 CSS hack。
我个人使用 jQuery 来处理它，它是 imgsizer 的改编版。由于我现在所做的大多数设计都使用宽度 % 来实现跨设备的流畅布局，因此对其中一个循环有轻微的适应（考虑到并非总是 100% 的尺寸）：
for (var i = 0; i < images.length; i++)
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1)
continue;
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
编辑： 你可能也对jQuery CSS3 Finaliz[s]e感兴趣。
【讨论】：
只是强调一下，Modernizr 不会在本身不支持它的浏览器中启用对背景大小的支持。它只是有一个方便的跨浏览器测试。当测试返回 false 时，由你来伪造它。【参考方案5】：试试文章background-size。如果您使用以下所有内容，它将在除 Internet Explorer 之外的大多数浏览器中运行。
.foo
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
【讨论】：
谢谢！这与“背景尺寸：封面”不同 这在 ipad 上为我拉伸，但没有缩放。谢谢发帖。 这也非常适合使其背景缩小。谢谢！ 如果背景图片是SVG，还需要在SVG内指定preserveAspectRatio="none"。有关此here 的更多信息。演示here.
你可以使用 background-size:cover;背景附件：固定；你可以缩放它【参考方案6】：
目前没有。它将在CSS 3 中提供，但在大多数浏览器中实现它需要一些时间。
【讨论】：
A List Apart 上的精彩文章：Supersize that Background, Please! -1 我不认为这个答案非常相关......而且它没有提供任何类型的解决方案。 @Potherca 这个答案当时是正确的（大约 3 年前）。 显示日期是有原因的。应留作历史参考。您是否正在浏览网站上的所有旧答案并否决它们？即使从那时起添加了更多信息，答案仍然是正确的。另请注意，这里的其他答案基本上是相同的（有些确实是不正确的——他们说这是不可能的）。我感觉你选择了这个，因为它有一些选票。 不，我选择了这个，因为它所做的只是说“计算机说不”，即使早在 2008 年就有多种解决方案可以解决这个问题；-)【参考方案7】：.style1
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
工作于：
Safari 3+ Chrome 随便+ IE 9+ Opera 10+（Opera 9.5 支持 background-size 但不支持关键字） Firefox 3.6+（Firefox 4 支持非厂商前缀版本）另外你可以试试这个 ie 解决方案
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
感谢 Chris Coyier 撰写的这篇文章 http://css-tricks.com/perfect-full-page-background-image/
【讨论】：
这比“背景尺寸：封面”更好或不同？ @PKHunter ，我不确定你到底要做什么。这是使用background-size: cover，除了浏览器前缀和IE解决方案【参考方案8】：
一句话：没有。拉伸图像的唯一方法是使用<img> 标签。你必须要有创意。
在 2008 年写下答案时，这曾经是正确的。今天现代浏览器支持background-size 解决了这个问题。请注意 IE8 不支持它。
【讨论】：
@Blowsie - 可爱。检查答案日期。在过去 5 年中，浏览器格局发生了一些变化。【参考方案9】：定义“拉伸和缩放”...
如果您有位图格式，通常（从图形上讲）拉伸它并拉动它不是很好。您可以使用可重复的模式来产生相同效果的错觉。例如，如果您有一个向页面底部变浅的渐变，那么您将使用一个像素宽且与容器高度相同的图形（或者最好更大以考虑缩放），然后将其平铺在页。同样，如果渐变穿过页面，它将比您的容器高 1 个像素并宽于您的容器，并沿页面向下重复。
通常情况下，当容器变大或收缩时，为了让图像产生拉伸以填充容器的错觉，您可以使图像大于容器。任何重叠都不会显示在容器边界之外。
如果您想要的效果依赖于带有弯曲边缘的盒子之类的东西，那么无论容器有多大，您都可以将盒子的左侧粘贴到容器的左侧，并有足够的重叠（在合理范围内） ，它永远不会用完背景，然后您将带有弯曲边缘的盒子右侧的图像分层并将其放置在容器的右侧。因此，当容器缩小或增长时，弯曲的盒子效果似乎会随之缩小或增长 - 事实上并没有，但它给人一种错觉，那就是正在发生的事情。
至于真正使图像随容器缩小和增长，您需要使用一些分层技巧使图像看起来像背景，并使用一些 javascript 来随容器调整它的大小。目前没有使用 CSS 执行此操作的方法...
如果你使用矢量图形，恐怕你已经超出了我的专业领域。
【讨论】：
Stretch=改变 x 和 y 维度独立地改变图像的纵横比，Scale=按比例改变 x 和 y 维度保持图像的纵横比。 @SoftwareMonkey：作为背景然后不，你不能在纯 CSS 中改变真正意义上的拉伸和缩放。您必须使用各种 CSS 技巧来营造一种错觉，即正如我所描述的那样。【参考方案10】：这就是我所做的。在拉伸课程中，我只是将高度更改为auto。这样，您的背景图片的大小始终与屏幕的宽度相同，并且高度始终具有正确的大小。
#background
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
.stretch
width:100%;
height:auto;
【讨论】：
【参考方案11】：添加background-attachment 行：
#background
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
.stretch
width:100%;
height:auto;
【讨论】：
【参考方案12】：我想指出，这相当于做：
html width: 100%; height: 100%;
body width: 100%; height: 100%; /* Add background image or gradient to stretch here. */
【讨论】：
【参考方案13】：另一个很好的解决方案是 Srobbin 的 Backstretch，它可以应用于正文或页面上的任何元素 - http://srobbin.com/jquery-plugins/backstretch/
【讨论】：
尼克，我们通常要求您在答案中提供突出部分，并仅提供外部链接以获取更多详细信息 - 这有助于在链接失效的情况下仍然有用的答案。 我的错。一般来说，你在文档的 中添加 backstretch，然后像这样初始化： $(".your-element").backstretch("path/to/image.jpg");【参考方案14】：试试这个
http://jsfiddle.net/5LZ55/4/
body
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
【讨论】：
【参考方案15】：SolidSmile 作弊的另一个技巧是通过设置宽度并使用 auto 作为高度来缩放（按比例调整大小）。
例如：
#background
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
【讨论】：
【参考方案16】：使用 border-image : yourimage 属性设置您的图像并将其放大到屏幕或窗口的整个边框。
【讨论】：
以上是关于拉伸和缩放 CSS 背景的主要内容，如果未能解决你的问题，请参考以下文章