国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

需要協(xié)助將內(nèi)容居中並使圖像連結(jié)可點(diǎn)擊
P粉794851975
P粉794851975 2023-09-13 12:12:49
0
1
791

本質(zhì)上，我需要圖像和標(biāo)題位於螢?zāi)恢醒?，但我還需要圖像可點(diǎn)擊並打開連結(jié)。我相信我有正確的程式碼來(lái)做到這一點(diǎn)，但我仍然遇到這兩個(gè)問題。圖像也有兩種不同的尺寸，因此也變得非常困難。我只是嘗試將紅色藥丸變小，將藍(lán)色藥丸變大（相對(duì)於它們的原始大?。?。

不必?fù)?dān)心其他 3 個(gè)影像的背景關(guān)鍵影格。我只需要有關(guān)標(biāo)題居中以及紅色和藍(lán)色藥丸圖像的幫助。

我嘗試使用線上程式碼，但仍然遇到相同的錯(cuò)誤。我嘗試將圖像調(diào)整為不同的尺寸，嘗試過(guò)不同的居中技術(shù)，但似乎無(wú)法實(shí)現(xiàn)。 

body {
    margin: 0;
    overflow: hidden;
  }
  
  #content {
    position: relative;
    z-index: 2;
    padding: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: Arial, sans-serif;
    font-size: 24px;
  }
  
  @keyframes matrix-rain {
    0% {
      background-image: url("matrix-pride.png");
    }
    5% {
      background-image: url("matrix-stripes.png");
    }
    10% {
      background-image: url("matrix-green.png");
    }
    15% {
      background-image: url("matrix-pride.png");
    }
    20% {
      background-image: url("matrix-stripes.png");
    }
    25% {
      background-image: url("matrix-green.png");
    }
    30% {
      background-image: url("matrix-pride.png");
    }
    35% {
      background-image: url("matrix-stripes.png");
    }
    40% {
      background-image: url("matrix-green.png");
    }
    45% {
      background-image: url("matrix-pride.png");
    }
    50% {
      background-image: url("matrix-stripes.png");
    }
    55% {
      background-image: url("matrix-green.png");
    }
    60% {
      background-image: url("matrix-pride.png");
    }
    65% {
      background-image: url("matrix-stripes.png");
    }
    70% {
      background-image: url("matrix-green.png");
    }
    75% {
      background-image: url("matrix-pride.png");
    }
    80% {
      background-image: url("matrix-stripes.png");
    }
    85% {
      background-image: url("matrix-green.png");
    }
    90% {
      background-image: url("matrix-pride.png");
    }
    95% {
      background-image: url("matrix-stripes.png");
    }
    100% {
      background-image: url("matrix-green.png");
    }
  }
  
  #background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: matrix-rain 10s linear infinite;
  }
  
  #header {
    font-family: fantasy;
    color: white;
    text-align: center;
    font-size: 400%;
    margin-top: 50px;
  }
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <div id="background">
    <h1 id="header">Pills</h1>
    
    <center>
      <a href="google.com"><img src="https://i.stack.imgur.com/D8d6J.png" style="width:35%;height:15%;"></a>
      <a href="google.com"><img src="https://i.stack.imgur.com/wPa6r.png" style="width:40%;height:20%;"></a>
    </center>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

P粉794851975
P粉794851975

全部回覆(1)
P粉649990163

我對(duì)您的目標(biāo)有所猜測(cè)，但是您不需要居中對(duì)齊映像容器嗎？我已在 #background 選擇器上執(zhí)行了此操作。

然後，我將調(diào)整大小的職責(zé)移至錨點(diǎn)，並將其顯示屬性設(shè)為 inline-block。這迫使它們完全包含圖像（請(qǐng)參閱為什麼錨標(biāo)記不採(cǎi)用其包含元素的高度和寬度）。我還將圖像的最大寬度設(shè)定為 100%。這一切都是在 CSS 中完成的，因?yàn)閮?nèi)聯(lián)樣式效率低下並且應(yīng)該避免。

圖像大小不等。您可以使用 CSS 以多種方式處理該問題，但最好的解決方法是調(diào)整它們的大小以匹配。我會(huì)將較大的尺寸縮小到與較小的尺寸相同。

僅供參考，您的樣式元素位於 head 和 body 元素之外。這是無(wú)效的 HTML。將其放入 head 元素內(nèi)。

此外，中心元素很長(zhǎng)已棄用，不應(yīng)使用。 

body {
  margin: 0;
  overflow: hidden;
}

#content {
  position: relative;
  z-index: 2;
  padding: 20px;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: Arial, sans-serif;
  font-size: 24px;
}

@keyframes matrix-rain {
  0% {
    background-image: url("matrix-pride.png");
  }
  5% {
    background-image: url("matrix-stripes.png");
  }
  10% {
    background-image: url("matrix-green.png");
  }
  15% {
    background-image: url("matrix-pride.png");
  }
  20% {
    background-image: url("matrix-stripes.png");
  }
  25% {
    background-image: url("matrix-green.png");
  }
  30% {
    background-image: url("matrix-pride.png");
  }
  35% {
    background-image: url("matrix-stripes.png");
  }
  40% {
    background-image: url("matrix-green.png");
  }
  45% {
    background-image: url("matrix-pride.png");
  }
  50% {
    background-image: url("matrix-stripes.png");
  }
  55% {
    background-image: url("matrix-green.png");
  }
  60% {
    background-image: url("matrix-pride.png");
  }
  65% {
    background-image: url("matrix-stripes.png");
  }
  70% {
    background-image: url("matrix-green.png");
  }
  75% {
    background-image: url("matrix-pride.png");
  }
  80% {
    background-image: url("matrix-stripes.png");
  }
  85% {
    background-image: url("matrix-green.png");
  }
  90% {
    background-image: url("matrix-pride.png");
  }
  95% {
    background-image: url("matrix-stripes.png");
  }
  100% {
    background-image: url("matrix-green.png");
  }
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: matrix-rain 10s linear infinite;
  text-align: center;
}

#background a {
  display: inline-block;
  max-width: 40%;
}

#background a img {
  max-width: 100%;
}

#header {
  font-family: fantasy;
  /* color: white; */
  text-align: center;
  font-size: 400%;
  margin-top: 50px;
}
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap CSS -->
  <link rel="stylesheet"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <div id="background">
    <h1 id="header">Pills</h1>

    <a ><img src="https://i.stack.imgur.com/D8d6J.png"></a>
    <a ><img src="https://i.stack.imgur.com/wPa6r.png"></a>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板