css - CSS:背景画像の上に線や点を作成する方法は?

Question

効果の名前はわかりませんが、例を次に示します: http://www.uiueux.com/wp/flowfolio/

注意深く見ると、2 番目の背景のように見えるドット付きのきれいな背景画像が表示されます。ドットは画像の一部ではありません。

• この効果の名前は？

• このような背景をドットで作成するにはどうすればよいですか?

• ドットの代わりに対角線でもこれを行うことはできますか?

どうもありがとうございました！

Answer 1

これは、背景画像の上に並べて表示される小さな半透明の背景画像です。

http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png

要素を作成して背景に引き伸ばすだけです。

#dots {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: url('dots.png');
    z-index: 1;
}

z-index要素の がz-index背景のよりも高くz-index、コンテンツのよりも低いことを確認してください。そうすれば、テキストが隠れません。

Answer 2

そのサイトでは、背景が透明な div を使用しています。したがって、それはページ上の 1 つの背景であり、その上に別の背景が繰り返されています。

<div class="back_mask"></div>

.back_mask {
    z-index: -990;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(img/bg_mask.png);
}

Answer 3

他の人は私を打ち負かしましたが、それは他の画像の上に配置された単なる画像です.

ここに画像の私の解決策があります

HTML

<div class="dots">
  <img src="http://placekitten.com/300/300" />
</div>

CSS

.dots {
  position: relative;
  display: inline-block;
}
.dots:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png);
}

対角線でそれを行うには、画像をタイル化できる対角線に変更するだけです