2

特定の位置で繰り返される背景画像を停止する CSS の方法はありますか?

HTML:

<div class="container bgimage">
   This is the content
</div>

CSS:

.container
    {
      height:100%;
    }

.bgimage
    {
      background-image:url('bg.png');
      background-repeat:repeat;
    }

位置 0 で画像を水平方向および垂直方向に繰り返し、繰り返し画像が verticalheight: 400pxに達したときに繰り返しを停止したいのですmax-heightが、背景のみで、.containerDIV を縮小することはありません。

グラデーションの背景でこれを行う方法は知っていますが、.containerDIV が 400px を超える場合に画像の背景を繰り返すための解決策もありますか?

CSS グラデーションの例:

linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 400px) repeat fixed 0 0 rgba(255, 255, 255, 0)

...

今度は、画像で同じことを行い、400px で停止します。

4

2 に答える 2

2

それがあなたを助けることを願っています

.youclass:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(path/image.png) repeat-y;
}

デモ

于 2013-11-21T18:30:34.007 に答える