Question

我希望在新网站的首页上放置一张图片，以覆盖整个宽度，并根据您的分辨率更改尺寸，但仍然将其水平居中。

这是我目前正在处理的网站：http://jonathan.ohrstrom.nu，我希望此图片覆盖整个红色部分：http://jonathan.ohrstrom.nu/style/img/featured.jpg

我该怎么做？这是我想要图像的div的css代码：

.featured {
    background-color: red;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

我试过这个没有成功：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
    width: 100%;
    height: 700px;
    size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

但是根本没有加载图像。没有no-repeat，那么图像覆盖了整个宽度，但它重复了自己..

Answer 1

以下是我的建议：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

您可以使用CSS后台属性做很多事情：

使用十六进制设置颜色。
使用url（）或单个属性background-image设置图像。
使用百分比或顶部/中心/底部属性水平和垂直居中图像。您也可以使用属性background-position设置它。
您还可以使用重复/不重复属性设置图像的重复。它也有自己的属性：background-repeat。
使用值或属性background-size设置图像的大小。您还可以使用此属性按照所需的属性封面或包含来缩放容器中的图像。
您可以执行更多操作，有关背景信息，请参阅此link。

使图像覆盖宽度（居中）

1 个答案: