CSS - фоновое изображение нижнего поля? - PullRequest
3 голосов
/ 27 октября 2011

Возможно ли это?

вот что я получил ...

<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 показывает через png mBot.

могу ли я поставить нижнее поле на изображение mMid bg?так что он останавливает 170px от нижней части всей области div?

Ответы [ 3 ]

2 голосов
/ 27 октября 2011

Вы можете использовать отдельный div и делать некоторые трюки, используя отступы и поля.

В скрипте синий div - это "средний" div, а красный div - это контентный div.Они по-прежнему имеют ту же сторону и положение.Зеленый div - это трюк, и он понижен на 170px.Теперь, когда вы даете зеленому div-фону вместо mMid, фон должен быть уменьшен на 170px по отношению к 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>

Или просмотреть jsFiddle

0 голосов
/ 28 ноября 2013
<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 голосов
/ 27 октября 2011

Прежде всего, поместите background-repeat после background-position. Измените внизу слева на 120px 130px (в зависимости от того, что вам нужно). Первое значение - это горизонтальное положение, а второе - вертикальное.

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