0

セパレータとして、DIVの間に細い「影」の線を入れたいのですが。シャドウラインを細くし、上下の不透明度を上げたいので、ミドルシャドウ、トップシャドウ、ボトムシャドウの3つの画像を作成しました。問題：「トップシャドウ」画像を「ミドルシャドウ」の上部に配置し、「ボトム」シャドウを下部に配置する方法がわかりません（複数のDIVなし）。花火で撮った画像と影の線の例を添付しています。多くのtksここに画像の説明を入力してください

div#content-center {
    overflow: hidden;
    background: khaki;
    background: transparent url('images/middle_shadow.png') repeat-y top left;
    padding: 0px 0px 0px 50px;
}
4

2 に答える 2

1

:beforeまた、および:afterpsedo-elements を使用してこれを行うこともできます。よく知らない場合は、ここでそれらを読んでください。

#content-center{
    background:  url('images/shadow_repeat.png') center right repeat-y;
}

#content-center:before,
#content-center:after{
    content:'';
    display:inline-block;
    position: absolute;
    background-repeat: none;

    /*size these to be what you need*/
    height:100px;
    width:100px;
}

#content-center:before{
    top:0;
    background-image: url('images/shadow_top.png');
}

#content-center:after{
    bottom:0;
    background-image:url('images/shadow_bottom.png');
}
于 2013-03-10T21:15:37.983 に答える
0

複数の背景を与える：

background:  url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;
于 2013-03-10T21:06:38.177 に答える