如何使用 CSS 為圖片添加多層透明疊加層

Question

如何按下三角形並將內容包含在白色圓圈的頂部？我正在嘗試找到一種解決方案來創建一個包含背景圖像的英雄部分，其中包含三個疊加形狀作為圖像的一部分。覆蓋層頂部將是 h1、p 和 btn。我在下面提供了一張螢幕截圖，展示了設計的外觀。

有以下三個疊加層：

1. 直角形狀，底部透明度為 0%。
2. 具有透明度的外圓。
3. 具有透明度的內圓。

這是我到目前為止所擁有的。我在下麵包含了一個片段，並且在 Codepen 上也有一個工作版本。圓圈位於左下角的正確位置。

*{
  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

由於圓圈只是裝飾性的而不是增加意義，因此它們沒有必要成為元素。它們作為背景圖像就足夠了。

這是一個簡單的程式碼片段，它放置內容元素並為其提供兩個背景圖像，兩者都具有一定的透明度，使用徑向漸變使它們成為圓形。

.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, 255%) , 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

注意：顯然您需要更改字體大小的設定以適合您的特定用例。我只是使它們相對於視口，以便它具有響應性。

此外，我認為英雄是否必須覆蓋整個寬度或設定最小高度之間存在一些混淆。當然，如果這是所需要的，那麼圓圈將位於相對於蘋果的不同位置，並且一些圖像可能會消失。