Question

有可能吗？

继承人我得到的......

<div id="mMid">
    <div id="mBot">
      Content
    </div>
</div>

#mBot {
    background:url(/images/mBot.png) bottom left no-repeat;
    width:  1001px; 
}
#mMid {
    background:url(/images/mMid.png) top left repeat-y;
    width:1001px;
}

mMid是垂直平铺的图像。 mBot是一个折角的png。我的问题是mMid通过mBot的png显示。

我可以在mMid bg图像上放一个底边距吗？所以它从整个div区域的底部停止170px？

Answer 1

你可以使用一个单独的div，并使用填充和边距做一些技巧。

在小提琴中，蓝色div是'Mid'div，红色div是内容div。他们仍然有相同的侧面和位置。绿色div是一个技巧，降低了170px。现在，当你给绿色div一个背景而不是mMid时，背景应该相对于内容div降低170px。

#mMid {
    width:1001px;
    border: 1px solid blue;
    padding-top: 170px;
}

#mTrick {
    border: 1px solid green;
    background:url(/images/mMid.png) top left repeat-y;
}
#mBot {
    background:url(/images/mBot.png) bottom left no-repeat;
    /* width:  1001px;  not needed. It will borrow the size from it's parent */
    border: 1px solid red;
    margin-top: -170px;
}

<div id="mMid">
    <div id="mTrick">
      <div id="mBot">
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
      </div>
    </div>
</div>

Or view jsFiddle

Answer 2

<style>
.bottom { 
    background: url(http://www.w3schools.com/tags/smiley.gif) no-repeat bottom; 
    clear: both; 
    position: relative; 
    width: 100%; 
    height: 50px; 
}
</style>

<div class="wrap">
    some content
    <div class="bottom"></div>
</div>

Answer 3

首先，将background-repeat放在background-position之后。将左下角更改为 120px 130px （根据您的需要）。第一个值是水平位置，第二个值是垂直位置。

background: url(/images/mBot.png) no-repeat 120px 130px;

CSS - 背景图像边缘底部？

3 个答案: