Cara menambah berbilang tindanan lutsinar pada imej menggunakan CSS

Question

Bagaimana cara menekan segitiga dan memasukkan kandungan di atas bulatan putih? Saya cuba mencari penyelesaian untuk mencipta bahagian wira dengan imej latar belakang yang mengandungi tiga bentuk tindanan sebagai sebahagian daripada imej. Di atas tindanan ialah h1, p dan btn. Saya telah menyertakan tangkapan skrin di bawah yang menunjukkan bagaimana reka bentuk akan kelihatan.

Terdapat tiga tindanan:

1. Bentuk segi empat tepat dengan ketelusan 0% di bahagian bawah.
2. Bulatan luar dengan ketelusan.
3. Lingkaran dalam dengan ketelusan.

Ini yang saya ada setakat ini. Saya telah menyertakan coretan di bawah, dan terdapat juga versi yang berfungsi pada Codepen. Bulatan berada di kedudukan yang betul di sudut kiri bawah.

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
svg {
  width: 628;
  height: 628:
}
.element {  
  position: relative;
  width: 100%;
  min-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
}
.element:before{
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%;0
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.circle-outer {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 420;
  w: 628;
  h: 628;
}
.circle-inner {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 400;
}
.hero-triangle {
  content: '';
  position: relative; 
  width: 100%;
  height: 100px;
  background: #fff;
  -webkit-clip-path: polygon(0 8%, 0% 100%, 100% 100%);
  clip-path: polygon(0 80%, 0% 100%, 100% 100%);
  z-index: 99;
}

<div class="container">
  <div class="element">
    <div class="hero-content">
    <h1>This belongs in circle</h1>
    <p>This belongs in circle too.</p>
    <button class="btn btn-primary">Learn more</button>
    </div>
    <svg viewbox width="1000" height="580" viewBox="0 0 100 100">
      <circle class="circle-outer" />
      <circle class="circle-inner" />
      <polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
    </svg>
  </div>
</div>
<div class="container">
  <h4>Body content must be positioned right underneath hero image for all widths.</h4>

Answer 1

Memandangkan bulatan hanya hiasan dan tidak menambah makna, tidak perlu ia menjadi unsur. Ia adalah mencukupi sebagai imej latar belakang.

Ini ialah coretan kod ringkas yang meletakkan elemen kandungan dan memberikannya dua imej latar belakang, kedua-duanya dengan sedikit ketelusan, menggunakan kecerunan jejari untuk menjadikannya bulat.

.element {
  position: relative;
  width: 100%;
  rmin-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
  clip-path: polygon(0 0, 0 80%, 100% 100%, 100% 0);
  aspect-ratio: 1296 / 728;
}

.hero-content {
  position: absolute;
  left: -12.5%;
  top: 50%;
  width: 70%;
  padding-top: 5%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, transparent 65% 100%), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  rjustify-content: center;
  flex-direction: column;
}

.hero-content h1 {
  font-size: 2vw;
}

.hero-content p {
  font-size: 1vw;
}

.hero-content button {
  font-size: 1vw;
}

  

    

      
This belongs in circle
      
This belongs in circle too.
      Learn more
    
    
  


  
Body content must be positioned right

Nota: Jelas sekali anda perlu menukar tetapan untuk saiz fon agar sesuai dengan kes penggunaan khusus anda. Saya hanya menjadikannya relatif kepada port pandangan supaya ia responsif.

Selain itu, saya rasa terdapat sedikit kekeliruan antara sama ada hero perlu menutup keseluruhan lebar atau menetapkan ketinggian minimum. Sudah tentu, jika ini yang diingini, bulatan akan berada dalam kedudukan yang berbeza berbanding dengan epal, dan beberapa imej mungkin hilang.