如何制作CSS背景网格线。

Question

---

背景上有四条线。它们在整体区域中可见，但不会出现在图片上。

如何实现这个效果？

- NDOE

---

你被回答的机会取决于你为解决问题所做的努力。你做了什么？展示一些代码。 - Samuel Asor

我猜那是一张可以设置为网页背景的图片。 - bhansa

不，这不是一个背景。我的老板让我用CSS做这个。我不知道从哪里开始。 - NDOE

你也可以创建 css 背景。 - bhansa

只是为了消除一些混淆...在CSS中的背景图像不是一个<img>标签HTML。这种效果显然是通过在CSS中使用background-image实现的。 - adrian.krzysztofek

Answer 1

这很简单，只需按照以下步骤操作。

body{
  background: linear-gradient(90deg, #eee 1%, transparent 1%) 1px 0, #fff;
  background-size: 200px 1px;
}

演示: https://codepen.io/anon/pen/VMzwNw

这个网站可以生成许多其他背景 -> http://lea.verou.me/css3patterns/#stairs

- adrian.krzysztofek

---

回答得很好，您能否添加一些详细信息说明您是如何创建它的。 - bhansa

这在具有背景图像或背景颜色的部分上无法工作。适用于继承body背景的部分。如何使其在整个内容上可见？ - NDOE

这要看你怎么看。如果分享图片中的页面：将渐变设置为body节点，而其他节点的背景都是半透明的呢？这样应该可以行得通，对吧？ - adrian.krzysztofek

太好了。我设置了 background-position: -1px 来移除最靠近浏览器边缘的左侧线条，并将 background-size 设置为 calc((100% / 8) + 0.2px)，这样可以移除最靠近浏览器边缘的右侧线条。我还将渐变宽度设置为 0.5% 而不是 1%，以使线条更细。 - Martin James

@MartinJames，感谢您的额外回答。将背景大小更改为12.5％是否可以实现与您相同的结果？ - suchanoob

Answer 2

你可以使用CSS线性渐变和多重背景来实现这一点。以下是一个例子：

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 1px, transparent 1px);
  background-position: 12.5%;
}

<div>
</div>

渐变绘制了一条垂直线，而background-size，background-position和background-repeat组合在一起使垂直线重复。

以下是一个带有背景图像和垂直线的示例：

div {
  height: 100px;
  background-color: transparent;
  background-size: 25% 100%, cover;
  background-repeat: repeat-x, no-repeat;
  background-image: linear-gradient(to right, black 1px, transparent 1px), url(http://lorempixel.com/400/200/);
  background-position: 12.5%, center;
}

<div>
</div>

- ncardeli