我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。

我在Stack Overflow上看到过一些问题,比如拉伸和缩放CSS背景。它工作得很好,但我想使用背景放置图像,而不是使用img标签。

在其中放置了一个img标签,然后用CSS向img标签致敬。

width:100%; height:100%;

它的工作,但这个问题有点老了,并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子,但它不适合我。

是否有一个好的方法来做背景图像声明?


当前回答

使用下面的CSS:

背景尺寸:100% 100%

其他回答

您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像,边界图像也会被绘制在它上面。

如果你的样式表是在不支持css3的地方实现的,border-image属性是非常有用的。如果你使用谷歌Chrome或Firefox,那么我推荐使用background-size:cover属性本身。

background-size: 100% 100%; 

拉伸背景以填充两个轴上的整个元素。

CSS3有一个漂亮的小属性,叫做background-size:cover。

这将缩放图像,使背景区域完全被背景图像覆盖,同时保持纵横比。整个区域将被覆盖。但是,如果调整后的图像的宽度/高度太大,则部分图像可能不可见。

这是由CSS技巧解释的:完美的全页面背景图像

演示:https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

代码:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

下面的方法对我很有效。

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

这可以在不同的维度上覆盖整个背景