Question

是否有办法在css中设置可调整大小的动态背景图片，例如。

List

当我将图像放在html页面中时它起作用，但是然后图像被视为内联，并且我尝试放置在图像顶部的任何元素被分流到它的右边或下面如果我使用显示块他们。我正在尝试做的是使用浏览器调整大小的图像，并将包含文本的div放在图像顶部，同时重新调整浏览器和图像。抱歉，如果这看起来很简单，但我习惯于绝对定位不响应的布局。

Answer 1

尝试：

#mainPage {
    width: 100%;
    height: 100%;
    font-size: 3vw;
    text-transform: uppercase;
    background: black;
    font-weight: bold;
    position: fixed;
    background-image: url('imagesfolder/someImage.jpg');
    background-size: cover;
    background-position: center center;
}

Answer 2

这是你想要在这里看到的background-size属性，完全符合你的需要。如果将其设置为cover，则您的图片将始终覆盖整个容器。

请注意，IE8及更早版本不支持此功能。

更多信息和可能的值：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 3

你可以使用

background-size: cover;

或

background-size: 100% 100%;

使用CSS调整大小的背景

3 个答案: