特定の位置で繰り返される背景画像を停止する 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
が、背景のみで、.container
DIV を縮小することはありません。
グラデーションの背景でこれを行う方法は知っていますが、.container
DIV が 400px を超える場合に画像の背景を繰り返すための解決策もありますか?
CSS グラデーションの例:
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 400px) repeat fixed 0 0 rgba(255, 255, 255, 0)
...
今度は、画像で同じことを行い、400px で停止します。