Html 如何使活动选项卡背景作为父背景图像

发布于09月14日

我有一个副手 link个问题是我想让活动选项卡的背景像父背景图像的延续一样.同样，正如你所看到的，标签显示了间隙和近边界半径之间的图像的Paret，这也是不能接受的.

<div class="container">...

.container {
  display: flex;
  flex-flow: column;
  max-width: 540px;
  background-image:  url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg");
}
.tabs {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
/*  куски image чтобы не было видно между табами  */
}

.tab-item {
  width: 33.33%;
  background: red;
  padding: 20px;
  border-radius: 15px 15px 0 0;
}

.tab-item .active {
/* быть такого же цвета как и image   */
}

.content {
  height: 500px;
  width: 500px;
  padding: 20px;
}

<div class="container">
  <div class="tabs">
    <div class="tab-item active">one</div>
    <div class="tab-item">two</div>
    <div class="tab-item">three</div>
  </div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cumque veniam magni earum aliquam suscipit minus natus neque ut, velit alias odio porro numquam accusantium! Assumenda autem aliquid corporis. Cupiditate.</div>
</div>

.container { display: flex; flex-flow: column; max-width: 540px; } .tabs { display: flex; gap: 10px; width: 100%; justify-content: space-between; /* куски image чтобы не было видно между табами */ } .tab-item { width: 33.33%; background: red; padding: 20px; border-radius: 15px 15px 0 0; height: 50px; box-sizing: border-box; } .tab-item.active { background-image: url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg"); } .content { height: 400px; width: 500px; padding: 20px; flex-grow: 1; background-image: url("https://images.ctfassets.net/hrltx12pl8hq/5ZjPpfAhn1rZWeopnHiXb/3e1b9a709297905672a0d24eac94a873/thumb_nov22_03.jpg"); background-position: 0px -50px; }

<div class="container"> <div class="tabs"> <div class="tab-item active">one</div> <div class="tab-item">two</div> <div class="tab-item">three</div> </div> <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo cumque veniam magni earum aliquam suscipit minus natus neque ut, velit alias odio porro numquam accusantium! Assumenda autem aliquid corporis. Cupiditate.</div> </div>

Html 如何使活动选项卡背景作为父背景图像

推荐答案

Html相关问答推荐

为什么html复选框总是具有只读属性？

如何正确使用counter()、counter—increment()和counter—reset()嵌套标题？

如何将FlexBox项目zoom 到其包含图像的大小

如何在div中淡入和淡出渐变背景？

如何使用css横向显示英文和中日韩文字？

Tailwind CSS 忽略我的元素的填充

如何在r中提取明显非标准html标签的值

如何使活动选项卡背景作为父背景图像

UL 的行为就像它不属于任何类别

如何在悬停时更改同级元素 CSS

在 laravel 中使用 DomPDF 将数据导出为 pdf 时，第二列被拉伸

使用 Thymeleaf 将图像水平居中

带圆角帽的 CSS 部分边框

显示填充正方形的图形的简单页面的 HTML 代码

调整屏幕大小时标题在图像下方重叠 - HTML

透明渐变凹矩形

Mediawiki css/html 信息框创建空白行

当我将鼠标悬停在测试类上时，左侧类的 colored颜色没有改变

font awesome 的 CDN/CSS 如何工作？

如何创建宏？