html - 在具有边界半径的图像上搜索栏

Question

我想在图片上设置一个搜索栏，如下图所示，尝试了一些技巧，但它不能正常工作。

我在设置带有边框半径的搜索栏时遇到困难

.img-border-rad {
  border-radius: 10px;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

<div class="img-pad">
  <img src="https://via.placeholder.com/600x100" class="img-border-rad">
  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

Answer 1

在两个元素周围放置一个包装器并在其上设置边框半径。隐藏包装上的溢出。

.border-rad {
  border-radius: 10px;
  overflow: hidden;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

img {
  display: block; /* eliminates descender space below */
  max-width: 100%; /* demo only */
}

<div class="img-pad border-rad">
  <img src="https://via.placeholder.com/700x100">

  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>