5

私は最近、このWebサイトGrandPixelsに出くわし 、1つの興味深い効果を見つけました。スライドショーのセクションでは、画像が点線のようなものであることがわかります。ズームインすると、これらの点は画像の一部ではなく、CSSで実現された一種のオーバーレイであることがわかりました。誰かがこの効果がどのように達成されるか、理想的にはcssで説明できますか？

4

5 に答える 5

3

これは、ここから抽出できる2x2オーバーレイ透明PNG画像で行われます：
背景オーバーレイパターン

その後、クラスslideshow-overlayは要素を機能させるために要素に適用されました。

.slideshow-overlay {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -99;
    height: 100%;
    width: 100%;
    background: url("images/bg-overlay-pattern.png") left top repeat
}
于 2012-08-07T08:52:14.570 に答える
1

彼らはこれを達成するための背景としてdivの2x2ピクセルの画像を使用しています。

于 2012-08-07T08:48:29.297 に答える
1

cssクラスが呼び出され、画像の上に.slideshow-overlayある点線の画像images/bg-overlay-pattern.png（2x2）を使用background-repeatedしposititon:fixedます。コメントで言ったようにfirebugを使用すると、使用されているcssが正確に表示されます。

于 2012-08-07T08:53:41.863 に答える
0

スライド画像をオーバーレイする画像付きのdivです。そのようなことをしたい場合は、このcssでスライドする前にdivを追加する必要があります。

display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -99;
height: 100%;
width: 100%;
background: url('../images/bg-overlay-pattern.png') left top repeat;
于 2012-08-07T09:44:31.690 に答える
0

これでうまくいきます：

.slides .img
{
     background: url(images/slide1.png) no-repeat;
}

.slides .img:after {
                content: "";
                background: url(images/pattern.png) repeat scroll left top transparent;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: absolute;
                z-index: -1;
            }
于 2013-11-09T11:27:30.710 に答える