Question

我在部分中有图像，我想将该图像作为div类“英雄”的背景图像，怎么制作？

<div  class="hero">
<section class="hero_content">
<h1 class="hero-h1">იტალიური სამზარეულო</h1>
<p class="hero_p">გოლდი სვეტებს....და კიდე რაღაც რანმობ ტექსტი რომლის დაკოპირებაც დამეზარა,ტექსტი </p>
<a href="#" class="hero_button">ვრცლად</a>
<img class="hero_image" src="Assets\images\main_pic.png">
</section>
<a class="hero_nav" href="#"><img class="scroll-down-button" src="https://www.solodev.com/_/assets/anchor/arrow-down.png">დაუყევი საიტს</a>
</div>

Answer 1

.hero{
  background:url('https://www.solodev.com/_/assets/anchor/arrow-down.png')
}

这应该将您的图像作为背景img

Answer 2

您可以进行以下操作：

<div  class="hero">
     <div class="hero__background">
          <img class="hero_image" src="Assets\images\main_pic.png">
     </div>
     <section class="hero_content">
          <h1 class="hero-h1">იტალიური სამზარეულო</h1>
          <p class="hero_p">გოლდი სვეტებს....და კიდე რაღაც რანმობ ტექსტი რომლის დაკოპირებაც დამეზარა,ტექსტი </p>
          <a href="#" class="hero_button">ვრცლად</a>
          <a class="hero_nav" href="#"><img class="scroll-down-button" src="https://www.solodev.com/_/assets/anchor/arrow-down.png">დაუყევი საიტს</a>
     </section>
</div>

和您的CSS

.hero {
 position: relative;
}

.hero__background,
.hero__content {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

.hero__background {
 z-index: -1;
}

.hero__background {
 width: 100%;
 height: 100%;
 object-fit: cover; // <- is like the background-size: cover;
}

如何制作图像作为div的封面？

2 个答案: