Question

当我将视口大小增加到@media only screen / * Tablet * /和（最小宽度：768px）{}时，我只是希望背景图像变大。

我尝试了background-size :;但是那没用。

然后我尝试使用其他图像文件来应用background-size ：;也仍然没有。

我该怎么做？

HTML：

    <advert class="bg-righttoleft">
      <div class="title-shift">
        <h1 class="title text-style">bla bla bla</h1>
        <h3 class="title-shift-h3 text-style">bla bla bla</h3>
        <p class="title-shift-p">bla bla bla</p>
      </div>
      <div class="channel">
        <h3 class="chan-text">Review of the week</h3>
        <a href="https://www.youtube.com/channel/UC-6OW5aJYBFM33zXQlBKPNA">
        <img class="chan-img" src="./engadget.jpg" alt="Engadget logo"></a>
      </div>
    </advert>

CSS：

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

advert  {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
  background-position-x: 50%;
  background-position-y: 75%;
  background-size: 1000px;
}

@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    advert  {
      background: url(./mi-vr-5-tablet.jpg);
      background-size: 2000px;
      background-repeat: no-repeat;
      font-size: 0.9em;
    }
}

Answer 1

为了放大背景图片，您可以使用：

背景尺寸：宽度高度；

例如：

背景大小：200％自动；

Temani Afif还表示@media only屏幕的闭幕标记“}” // Tablet * / 和（最小宽度：768像素）丢失

这是我的示例代码：

<div class="background"></div>

.background{
  height: 200px;
  width: 600px;
  background-image: url('https://images.pexels.com/photos/1735092/pexels-photo-1735092.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500');
  background-position: center center;
  background-size: 1000px auto;
  background-repeat: no-repeat;
}

如何使用@media查询放大背景图片？

1 个答案: