在 html 和 css 中創建英雄鏡頭

Question

我對 css 相當陌生，但仍然不完全了解最佳方法。 我試圖為網頁創建一個英雄鏡頭，但我知道我沒有使用最佳實踐。 有人可以提出比我使用的更好的方法嗎？

這個想法是左列將有一些標題和文本。 而右列將包含一個圖像。

<section>
    <div class="hero-image">
        <div class="row">
            <div class="column" style="background-color:#aaa;">
                <h2>Column 1</h2>
                <p>Some text..</p>
            </div>
            <div class="column" style="background-color:#bbb;">
                <h2>Column 2</h2>
                <p>Some text..</p>
            </div>
        </div>
    </div>
</section>

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/icon.png");
  height: 70vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.row {
  display: flex;
  padding-top: 18rem;
}

.column {
  flex: 50%;
  padding: 10px
}

Answer 1

不過，您並沒有真正在右欄上放一張圖片嗎？ 我將您的.hero-image class 移動到右列並更改了background-size ，以便它可以適應容器的高度和寬度。 檢查下面的片段。 調整並適用於您的偏好。

 .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fkbob.github.io%2Fimages%2Fsample-4.jpg&f=1&nofb=1"); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; position: relative; }.right-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.camera-rumors.com%2Fwp-content%2Fuploads%2F2018%2F02%2Fsony-a7iii-sample-image-3.jpg&f=1&nofb=1"); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }.row { display: flex; padding-top: 10rem; }.column { flex: 50%; padding: 10px }

 <section> <div class="hero-image"> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column right-image" style="background-color:#bbb;"> </div> </div> </div> </section>