Html 子元素的单一背景

<div class="outer-block">
   <div class="inner-block"></div>
   <div class="inner-block"></div>
   <div class="inner-block"></div>
</div>

.outer-block {
  position: relative;
  overflow: hidden;
}

.inner-block {
  background-image: url('./dsa.jpg');
  width: 100%;
  height: 200px;
  margin: 10px;
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.outer-block {
  position: relative; /* relative on the container */
  width: 300px;
}
.inner-block {
  height: 150px;
  clip-path: inset(0); /* clip-path on the child */
  margin: 10px;
}
/* your background */
.inner-block:before {
  content:"";
  position: absolute;
  inset: 0;
  background: url(https://picsum.photos/id/1/200/600) center/cover;
}
/**/

body {
  background: lightblue;
}

<div class="outer-block">
  <div class="inner-block"></div>
  <div class="inner-block"></div>
  <div class="inner-block"></div>
</div>

Html相关问答推荐

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

将CSS应用于TD标记内的div

MatSnackBar： colored颜色 不起作用

为什么前端框架可以创建自定义属性，而我却被期望在挖掘之前添加数据

如何保持嵌套进度条的背景色？

子元素的单一背景

SVG的动态CSS

30000ms后超时重试：期望找到元素：someElement，但从未找到它

网格布局中的组件

如何将图像放在其内部按钮下方

为什么我的 html 对话框在 React 中没有渲染在我的内容之上？

是否有语义 HTML 可以澄清含义？

：：可点击图标之前

需要帮助个性化我的 CSS 导航栏：如何在鼠标悬停时突出显示

元素？

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

我可以在标签元素中使用标题元素吗？

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条？

使元素扩展宽度减go margin-right

如何计算没有根元素的先前 html 标记(lxml python3)编辑：还获取元素