html - CSS 方形背景 - 图片
问题描述
我试图只使用 CSS 制作一些方形背景,但我只得到了线条背景,没有水平线的选项。
这是我的示例代码:
.container{
background-color:red;
width: 400px; height:200px; margin:0 auto;
background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%),
linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%);
background-size: 100px 100%;
}
<div class="container">
</div>
解决方案
您只需要两种渐变,一种用于定义水平线,另一种用于定义垂直线:
.container {
width: 398px;
height: 198px;
margin: 0 auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(50px - 2px),
#fff calc(50px - 2px) 50px),
repeating-linear-gradient(to bottom,
transparent 0 calc(50px - 2px),
#fff calc(50px - 2px) 50px)
red;
}
<div class="container">
</div>
使用 CSS 变量优化:
.container {
width: 398px;
height: 198px;
margin: 0 auto;
--g:transparent 0 calc(50px - 2px),#fff 0 50px;
background:
repeating-linear-gradient(to right, var(--g)),
repeating-linear-gradient(to bottom,var(--g))
red;
}
<div class="container">
</div>
另一种语法:
.container {
width: 398px;
height: 198px;
margin: 0 auto;
--g:transparent calc(100% - 2px),#fff 0;
background:
linear-gradient(to right, var(--g)),
linear-gradient(to bottom,var(--g)),
red;
background-size:
50px 100%,
100% 50px;
}
<div class="container">
</div>
如果您想明确定义将根据元素宽度/高度调整的行/列数,您可以执行以下操作:
.container {
--nr:3; /* number of rows */
--nc:6; /* number of columns */
--b:2px; /* border length */
width: 400px;
height: 200px;
margin: 10px auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc( (100% - var(--b)*(var(--nc) - 1))/var(--nc) ),
#fff 0 calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b))),
repeating-linear-gradient(to bottom,
transparent 0 calc( (100% - var(--b)*(var(--nr) - 1))/var(--nr) ),
#fff 0 calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b)))
red;
}
<div class="container">
</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">
</div>
另一种语法:
.container {
--nr:3; /* number of rows */
--nc:6; /* number of columns */
--b:2px; /* border length */
width: 400px;
height: 200px;
margin: 10px auto;
--g:transparent calc(100% - var(--b)),#fff 0;
background:
linear-gradient(to right, var(--g)),
linear-gradient(to bottom,var(--g)),
red;
background-size:
calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
}
<div class="container">
</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">
</div>
mask
如果您想要透明度,您也可以这样做:
.container {
--nr:3; /* number of rows */
--nc:6; /* number of columns */
--b:2px; /* border length */
width: 400px;
height: 200px;
margin: 10px auto;
--g:#fff calc(100% - var(--b)),transparent 0;
-webkit-mask:
linear-gradient(to right, var(--g)),
linear-gradient(to bottom,var(--g));
mask:
linear-gradient(to right, var(--g)),
linear-gradient(to bottom,var(--g));
-webkit-mask-size:
calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
mask-size:
calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
-webkit-mask-composite: source-in;
mask-composite: intersect;
background:red;
}
body {
background:linear-gradient(gray,white);
}
<div class="container">
</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">
</div>
上面的例子将创建一个均匀的网格。您还可以考虑使用多个渐变,以便单独控制每条线并构建自定义网格。
.container {
width: 400px;
height: 200px;
margin: 0 auto;
background:
/*vertical ones*/
linear-gradient(blue,blue) center/2px 100%,
linear-gradient(blue,blue) 25% 0/2px 100%,
linear-gradient(blue,blue) 85% 0/2px 100%,
/*horizontal ones*/
linear-gradient(blue,blue) 0 25%/100% 2px,
linear-gradient(blue,blue) 0 75%/100% 2px,
red;
background-repeat:no-repeat;
}
<div class="container">
</div>
推荐阅读
- storage - 我应该如何篡改证明文件,以便只有我的应用程序可以修改它而不是用户
- powerbi - 来自测量的 PowerBI ZSCORE
- git - 自动签出默认分支的命令
- bash - 使用 sed 将文件从 bash 转换为 csv
- networking - 无法使用 netplan 和 cloud-init 复制 ECMP 设置
- git - ssh -T git@github.com 报告错误无法创建目录'/.ssh'
- python - 如何将产品日期与今天的日期进行比较并创建一个新列来指示它们是否已过期?
- android - 如何获得改造队列的数量?
- angular - 视图准备好时使用异步管道获取数据
- javascript - jQuery Spectrum 颜色选择器无法禁用