html - 在具有边界半径的图像上搜索栏
问题描述
我想在如下图所示的图像上设置一个搜索栏,尝试了一些技巧,但它不能正常工作。
我在设置图像上的边界半径的搜索栏时遇到困难
.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>
解决方案
在两个元素周围放置一个包装器并在其上设置边框半径。隐藏包装上的溢出。
.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>
推荐阅读
- snowflake-cloud-data-platform - 有没有办法找出雪花查询正在访问的表?
- node.js - AWS Lambda 函数不会从 Cognito PostConfirmation 事件触发,但它在测试中有效
- c - 如何从连接的二进制文件中分割出一个二进制文件
- javascript - GET XMLHttpRequest 在就绪状态 4 和状态 0 处停止
- c++ - 使用-xipo -xO4构建时发生c ++崩溃
- julia - 从图灵模型绘制 Julia 中的可信区间
- python - 将值设置为变量的单行 lambda 函数
- powershell - 从命令行从几个大型压缩文件夹中解压缩文件
- python - 如何将相同的功能应用于多个列表
- flutter - 如何使用 SharedPreferences 保存列表?