首页 文章

css背景图像重复直到特定高度

提问于
浏览 次
1

有没有一种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水平和垂直重复图像，并在重复图像到达垂直 height: 400px 时停止重复，像 max-height 但仅用于背景而不缩小 .container DIV .

我知道如何使用渐变背景来完成这项工作，但是当 .container DIV甚至高于400px时，是否还有一种重复图像背景的解决方案？

Example CSS Gradient:

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

...

现在我想对图像做同样的事情，并以400px停止它 .

html css background-image background-repeat

2 回答

  • 1

    希望它会对你有所帮助

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

    demo

    回复于
  • 0

    虽然我不知道您所要求的是否可行，但我有一个可能适合您所需要的解决方案 .

    您可以做的是在容器div之外创建一个div，它将作为400px高重复背景 .

    HTML：

    <div class="tile-background"></div>

<div class="container">

    Hello, Luigi.

</div>

    CSS：

    .container {

    z-index: 0; /* MAKES the container appear on top of other elements */
    position: absolute; /* REQUIRED for z-index */

}

.tile-background {

    /* REQUIRED FOR Z-INDEX ... positions the div in reference to the window */
    position: absolute;

    top: 0px; /* positions div's top at the top edge of the window */
    left: 0px; /* positions div's left side at the left edge of the window */

    width: 100%;
    height: 400px;

    background-image: url(bg.png);
    background-repeat: repeat;

}

    以下是代码的预览：

    http://jsfiddle.net/Ember_Hawk/WP5Zu/1/

    基本上，您创建一个显示在所有其他元素后面的div，并且不会影响它们的位置 .

    如果您需要背景从容器div开始的位置开始相对于其在y轴上的位置，您只需更改“tile-background”类的“top”属性 .

    如果你的容器上方有一个动态变化的元素，那么如果没有一些帮助，这真的不行 .

    希望我帮忙！祝好运！ =）

    回复于

相关问题