0

正方形の間に青い境界線がある個々の正方形の画像を使用して、HTML/CSS でSpace Invaders アイコンの「ピクセル化された」バージョンを再作成しようとしています。30px 2px

ただし、正方形の画像が各行で均等に繰り返されないため、境界線を揃えるのが非常に困難です (たとえば、最初の 2 行では正方形の画像が 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!

基本的にあなたがしていることは、あなたのピクセル<div>のための一般的なCSSルールを持っていることです.私はそれを次のように定義しています:

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

もちろん、 よりも一般的ではないものを選択してくださいdiv。これは例として示したものです。このようにして、透明なピクセルを構成する div が作成されます。画像のピクセルを埋める必要があるたびに、.pxこの最小限の CSS ルールでクラス (私は を使用) を追加するだけです

.px{ 
  background-color: lightgreen;
}

新しい行を開始するときはdiv、クラスを に.firstして、 にしclear:leftます。

.first{ 
  clear:left;
}

これはかなり簡単な解決策だと思います！CSS ピクセル アートを取り入れましょう。

于 2013-03-11T01:57:43.387 に答える