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

Simpan imej tindanan dalam sempadan imej - hadkannya untuk melekat pada imej sahaja
P粉838563523
P粉838563523 2023-09-20 22:57:13
0
1
767

Saya cuba meletakkan tindanan pada imej, tetapi tindanan ini memanjang ke bar menu atas dan saya tidak tahu cara menampalnya pada imej.

Saya mencuba pelbagai cara untuk mengubah saiz imej dan menukar kedudukan, tetapi ia masih terbentang di atas bar menu. Ini adalah pembaikan kecil untuk skrin penuh apabila saya melaraskan kedudukan teratas, tetapi sekali pada mudah alih ia tidak akan berfungsi kerana menu disembunyikan. Dan, apabila saiz berubah, ia mengalir di bawah imej.

header {
  border-bottom: 5px solid coral;
  font-family: Arial;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.bg-image {
  background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  background-color: blue;
  background-repeat: no-repeat;
}

.vh-80 {
  min-height: 80vh;
}

.banner-text {
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial;
}

.bg-overlay>* {
  position: relative;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
<header class="grid-spaceBetween-middle ">
  <div class="col-2 ">
    <a href="/index.html" class="logo">
      <p>Logo</p>
    </a>
  </div>
  <nav class="col-10">
    <a href="/#.html">About Us</a>
    <a href="/#.html"></a>
    <a href="/#.html">Business Travel</a>
    <a href="/#.html">Be Inspired</a>
    <a href="/#.html">Contact</a>
  </nav>
</header>

<!-- 圖像橫幅 -->

<section class="grid-spaceAround vh-80 bg-image bg-overlay">
  <div class="col-12-middle banner-text">
    <p>IT'S ALL <strong>GOOD</strong></p>
  </div>
</section>

Saya telah cuba menukar bahagian, saya telah mencuba kaedah kedudukan relatif, tetapi tiada apa yang berhasil.

P粉838563523
P粉838563523

membalas semua(1)
P粉403804844

Tambah pada setiap elemen .bg-image 上添加 position: relative,而不是在覆蓋層 .bg-overlay > *.

header {
  border-bottom: 5px solid coral;
  font-family: Arial;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.bg-image {
  background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  background-color: blue;
  background-repeat: no-repeat;
  position: relative;
}

.vh-80 {
  min-height: 80vh;
}

.banner-text {
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial;
}


.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
<header class="grid-spaceBetween-middle ">
  <div class="col-2 ">
    <a href="/index.html" class="logo">
      <p>Logo</p>
    </a>
  </div>
  <nav class="col-10">
    <a href="/#.html">About Us</a>
    <a href="/#.html"></a>
    <a href="/#.html">Business Travel</a>
    <a href="/#.html">Be Inspired</a>
    <a href="/#.html">Contact</a>
  </nav>
</header>

<!-- Image banner -->

<section class="grid-spaceAround vh-80 bg-image bg-overlay">
  <div class="col-12-middle banner-text">
    <p>IT'S ALL <strong>GOOD</strong></p>
  </div>
</section>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan