背景顏色的影像-有解無憂

我正在嘗試獲取此布局，背景顏色上的影像我已經嘗試了很多屬性，例如物件適合和溢位，但它們都沒有作業這正是我需要的，但抱歉我無法很好地解釋它 1 指示區域白色背景色 2 表示灰色背景色區域

提前致謝，

背景顏色的影像

uj5u.com熱心網友回復：

像這樣的東西，顏色覆寫影像？

.figure {
  position: relative;
  display: block
}

.figure:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff50;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2
}

<figure class="figure">
 <img src="https://i.picsum.photos/id/661/500/500.jpg?hmac=Ou6iQzupAfo2_cHo2jvdRE1EgWsOWySyWkoSPY3cRco" alt="Image">
</figure>

uj5u.com熱心網友回復：

真的很難理解你的問題嗎？請參閱下面我對您的問題的解釋；）

.container {
 display:flex;
 flex-direction:column;
 width:60%; /* TO see it directly in stackoverflow this should be 100% */
 flex-wrap:wrap;
}

.top-container {
 display:flex;
 position:relative;
 background-color:white;
 width:100%;
 min-height:200px;
}

.bottom-container {
  display:flex;
  justify-content:flex-end;
  background-color: #f1f1f1;
  width:100%;
  padding:0 5rem;
}

.indicating-area {
  position: absolute;
  width:100px;
  height:100px;
  left:30px;
  top:30px;
  background-color:#dadada;
}

.image-container {
  transform:translateY(-50%);
  background-color:#dadada;
  padding:1rem;
  border-radius:0.5rem;
}

<div class="container">
  <div class="top-container">
     <div class="indicating-area">
     </div>
  </div>
  
  <div class="bottom-container">
    <div class="image-container">
     <img src="https://picsum.photos/200" width="200" height="200"/>
    </div>
  </div>

</div>

uj5u.com熱心網友回復：

不確定這是否是您想要的，但如果您想填充兩種不同的顏色，您可以使用...

background: linear-gradient(to bottom, white 0%, white 50%, gray 50%, gray 100%);

顯示代碼片段

.test {
  width: 100px; height: 50px; border: 1px solid;
  
  background: linear-gradient(to bottom, white 0%, white 50%, gray 50%, gray 100%);
  
}

<div class="test"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467534.html

標籤：css 图片溢出

上一篇：嘗試僅使用HTML和CSS在表格中實作可折疊/可擴展的行

下一篇：React：表格列單元格，帶色標的條件格式