Question

这是我的CSS代码：

.TabTop {
background-image: url("https://i.imgur.com/5qOZqaY.png");
width: 1855px;
height: 168px;
background-repeat: no-repeat;
}
.TabMid {
background-image: url("https://i.imgur.com/6uMuiY4.jpg");
width: 1855px;
height: 100%;
background-repeat: repeat-y;
}
.TabBot {
background-image: url("https://i.imgur.com/5Psk33C.png");
width: 1855px;
height: 237px;
}

这是我的HTML代码：

<div class="TaTop"></div>
<div class="TabMid"></div>
<div class="TabBot"></div>

现在它看起来像这样： https://i.imgur.com/uChZnNk.png

正如你在右边看到的那样，存在差距。

我希望图像的所有3个部分都居中，并根据用户计算机显示器尺寸的大小调整宽度。

我也尝试过背景：封面它似乎不起作用。

我怎么能这样做？

Answer 1

使用background-size: cover应该可以解决问题。但它不会给你那么多的控制权。

为此，您应该使用媒体查询和更多背景属性。

@media only screen and (max-width:420px) { .TabTop { background-position: center } }

您可以尝试更多媒体查询尺寸，以更好地控制图像在不同设备上的外观。

以下是Media queries guide的更多示例。

Answer 2

您在＆＃39; TabTop＆＃39; 的课程中缺少＆＃39; ，如果您在高度中使用100％通常会如果父级有一些引用该值的类，如position:relative。

，则无效

＆＃13;

.TabTop {
background-image: url("https://i.imgur.com/5qOZqaY.png");
width: 1855px;
height: 168px;
background-repeat: no-repeat;
}
.TabMid {
background-image: url("https://i.imgur.com/6uMuiY4.jpg");
width: 1855px;
height: 100vh; /* alternative for % */
background-repeat: repeat-y;
}
.TabBot {
background-image: url("https://i.imgur.com/5Psk33C.png");
width: 1855px;
height: 237px;
}

＆＃13;

<div class="TabTop"></div>
<div class="TabMid"></div>
<div class="TabBot"></div>

＆＃13;

使可调整大小的背景图像适合屏幕的宽度

2 个答案: