0

我正在尝试使用带有蓝色边框的正方形图像在 HTML/CSS 中重新创建Space Invaders 图标的“像素化”版本。30px 2px

但是，我在对齐边框时遇到了难以置信的困难，因为方形图像在每一行上的重复次数并不相同（例如，前 2 行仅显示方形图像两次，而第 3 行显示 7 次，等等）。2px

我首先想象了一个 11 x 8 的矩形网格，然后我使用了一个<div>与正方形图像具有相同宽度和高度并且没有边框作为图像不应该出现的占位符1px，同时以实心边框显示每个正方形图像它们应该出现的地方。

2px这样做的问题是，虽然内部的图像正确显示了（1px+边框）的加倍1px边框，但最外面的正方形仅1px在不靠近另一个正方形的外侧显示边框。

所以然后我尝试2px在“外部正方形”的“外侧”设置边框，但这随后将整行中图像行的整个“行高”（使用vertical-align: middle;）从1px更改为2px，从而创建了一个空白的1px高空间在内部正方形的顶部。

所以在过去的几个小时里，我一直在拉头发，试图让它看起来“正确”，2px边框在“网格”中正确对齐，而不是出现在没有方形图像的地方，但我要进去了界。

当然，有一种更简单、更直接的方法可以做到这一点。 什么是神奇的解决方案？

4

1 回答 1

0

所以，既然你一直在努力解决这个问题，我想我可能会建议一个更简单的解决方案，也许不能完全回答你的问题，如果没有 HTML 示例，这很难给出。

我制作了这个纯 CSS 的空间入侵者：

CSS-only Space Invader!

基本上你所做的就是为你的像素设置一个通用的 CSS 规则<div>，我将它定义为：

div{ 
  background-color: transparent;
  border: 1px solid #000;
  float: left;
  width: 30px;
  height: 30px;
}

当然，请选择不那么通用的东西div，我这样做只是为了示例目的。通过这种方式，你有一个 div 组成你的透明像素。每次您需要在图像中填充一个像素时，只需使用.px这个最小的 CSS 规则添加一个类（我使用过）

.px{ 
  background-color: lightgreen;
}

当你开始你的新生产线时，给你div一个 class of.first并 make it clear:left。

.first{ 
  clear:left;
}

我认为这是一个非常简单的解决方案！带上 CSS 像素艺术！

于 2013-03-11T01:57:43.387 回答