CSS - 背景图像边距底部？

发布于 2024-12-12 06:18:10 字数 455 浏览 0 评论 0原文

是否可以？

这就是我得到的...

<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 背景图像上添加下边距吗？所以它会停止距整个 div 区域底部 170px 的距离？

原文

Is it possible?

heres what i got...

<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 is a vertically tiled image. mBot is a png with a folded corner.
my problem is that mMid shows through the png of mBot.

can i put like a bottom margin on the mMid bg image? so it stops the 170px from the bottom of the whole div area?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多孤肩上扛 2024-12-19 06:18:11

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

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

First of all, put the background-repeat after the background-position. Change bottom left to 120px 130px (according to what you need). The first value is the horizontal position and the second value is the vertical.

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

回复收藏 0 原文

浅唱ヾ落雨殇 2024-12-19 06:18:10

您可以使用单独的 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>

或查看 jsFiddle

You can use a separate div, and do some tricks using paddings and margins.

In the fiddle, the blue div is the 'Mid' div, and the red div is the content div. They still have the same side and position.
The green div is a trick, and is lowered 170px.
Now, when you give the green div a background instead of mMid, the background should be lowered 170px relative to the content div.

#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

回复收藏 0 原文

撩发小公举 2024-12-19 06:18:10

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

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

回复收藏 0 原文

~没有更多了~