CSS - 背景图像边距底部？答案

【问题标题】：CSS - background image margin bottom?CSS - 背景图像边距底部？
【发布时间】：2015-07-31 21:47:51
【问题描述】：

有可能吗？

这就是我得到的...

<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？

【问题讨论】：

是否可以选择不使 png 透明，而是使其不透明并用网站背景颜色填充背景？
很遗憾，不，mBot bg 图像必须是 png。那不是一个选择。这就是为什么我有这么多困难......
是的，但 png 也可以是不透明的。
误解了。这是一个PNG。和透明这就是为什么它在它下面显示平铺图像

标签： css html background margin

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

我不知道你是否理解这个问题。
你的 css 将把我不需要的 bg 图片从左边移动 120px，从顶部移动 130px。
应该降低的是重复图像。
没有降低但从底部升高...没关系，我用不同的方式做了...由于缺少重复的 img，我的文件现在很大了