html - 匹配两个 div 的渐变,如果它们具有不同的宽度
问题描述
我有 10 个内联 div,它们具有相同的渐变类型 - 45 度线,但渐变有不同的颜色,div 有不同的宽度。
是否可以匹配渐变?(希望下面的图片能解释一下)
我的渐变 CSS。只有颜色变化。
#div1 {
background: repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#div2 {
background: repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
div {
height:100px;
display:inline-block;
}
<div id="div1" style="width: 30px"></div><div id="div2" style="width: 40px"></div>
现在的样子(行不匹配):
我希望它看起来如何:
解决方案
您可以在同一个元素上使用两种渐变,并使用background-clip
技巧来隐藏第一个的一部分,直到您将看到第二个的填充时才会出现:
.box {
height:100px;
width:80px;
padding-right:50px;
margin:5px;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) content-box,
linear-gradient(#fff,#fff) content-box, /*avoid the overlap of both gradient*/
repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) padding-box;
}
<div class="box"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="padding-right:100px;"></div>
如果你有超过 2 个渐变,你可以考虑background-size
。在每个背景下都有一个白色背景层以隐藏可渗透渐变的技巧:
.box {
height:100px;
width:300px;
margin:5px;
display:inline-block;
background:
/*First gradient*/
repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/30% 100%,
linear-gradient(#fff,#fff) left/30% 100%,
/*Second one*/
repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/60% 100%,
linear-gradient(#fff,#fff) left/60% 100%,
/**/
repeating-linear-gradient(
45deg,
rgba(15,15,15,0.8),
rgba(15,15,15,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/80% 100%,
linear-gradient(#fff,#fff) left/80% 100%,
/**/
repeating-linear-gradient(
45deg,
rgba(12,155,155,0.8),
rgba(12,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/100% 100%,
linear-gradient(#fff,#fff) left/100% 100%;
background-repeat:no-repeat;
}
<div class="box"></div>
这是另一个依靠mix-blend-mode
更少代码来实现相同结果的想法:
.box {
height:100px;
width:300px;
position:relative;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.6),
rgba(0,0,0,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px),
#fff;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(to right,blue 20%,red 20%, red 40%,orange 40%);
mix-blend-mode: lighten;
}
<div class="box"></div>
这是另一个依赖于background-attachment:fixed
你可以保持透明度的想法:
.box {
height:100px;
width:30px;
margin:5px 0;
display:inline-block;
background-attachment:fixed;
}
#f1 {
background-image:repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#f2 {
background-image:repeating-linear-gradient(
45deg,
rgba(15,15,15,0.8),
rgba(15,15,15,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#f3 {
background-image:repeating-linear-gradient(
45deg,
rgba(12,155,155,0.8),
rgba(12,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
<div class="box" id="f1"></div><div class="box" id="f2" style="width:100px"></div><div class="box" id="f3" style="width:150px"></div>
另一种具有多种背景的方式:
.box {
height:100px;
width:300px;
position:relative;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 3px,
rgba(250,250,250,1) 3px,
rgba(250,250,250,1) 6px),
linear-gradient(to right,
rgba(235,102,107,0.6) 20%,
rgba(155,155,155,0.8) 20%, rgba(155,155,155,0.8) 40%,
rgba(15,15,15,0.8) 40%);
}
<div class="box"></div>
推荐阅读
- terraform - 如何有条件地填充 terraform 中的参数值?
- php - 为什么 v2 和 v3 权限/列表结果之间的输出差异
- c - UDP聊天的非阻塞功能
- debugging - 如何创建以时钟时间开始和结束的基于时间的延迟?
- javascript - 将 .Properties 文件中的变量读取到在 NodeJS 服务器中运行的 Javascript/HTML 页面中
- python - 如何避免estimateRigidTransform返回None
- reactjs - 在 React Gatsby 网站中加载本地 mp4 文件作为视频标签的源
- xcode - 将环境变量从 fastlane 传递到 Xcode 构建阶段脚本
- swift - 未设置 Google 地方信息自动完成委托
- database - 使用 SPARQL 查询获取城市的州/省