Пашырэнне DIV з фонавымі малюнкамі

У мяне ёсць трохі незвычайнае патрабаванне, якое я сапраўды змагаюся з. Я стварыў вобраз, каб праілюстраваць тое, што я спрабую зрабіць:

enter image description here

У асноўным гэта DIV, які складаецца з 3-х абласцей - верхняй, сярэдняй і ніжняй. Усе 3 зоны маюць фонавыя малюнкі і мне трэба сярэднюю вобласць (сіні біт, уключаючы яго мяжы), каб разгарнуць са зместам. Таму чым больш кантэнту ёсць чым больш сярэдняя вобласць будзе. Праблема заключаецца ў тым, што ўтрыманне на самай справе трэба, каб пакрыць увесь DIV, а не толькі сярэднюю вобласць.

Гэта тое, што я маю на дадзены момант:

HTML:

<div id="panel">
    <div id="top"></div>

    <div id="middle">
        <div id="content">
            Lorem ipsum, etc...
        </div>
    </div>

    <div id="bottom"></div>
</div>

CSS:

#panel {
    float: left;
    width: 300px;
    position: relative;
}

#top {
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100%;
    background: url(top.png) no-repeat;
}

#middle {
    float: left;
    margin-top: 100px;
    width: 100%;
    min-height: 200px;
    background: url(middle.png) repeat-y;
}

#bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: url(bottom.png) no-repeat;
}

Гэта на самай справе не працуе і, верагодна, няправільны падыход. Хто-небудзь ёсць якія-небудзь ідэі?

2
Ці з'яўляюцца мяжы часткі фонавага малюнка?
дададзена аўтар showdev, крыніца
Я думаю, што я спрабаваў, што праблема мяжы на сярэднюю плошчы адрозніваецца ад верхніх і ніжніх абласцей, так што перакрывае.
дададзена аўтар GSTAR, крыніца
Ды мяжы з'яўляюцца часткай фонавага малюнка. Яны не могуць быць замененыя ў стылі CSS.
дададзена аўтар GSTAR, крыніца
вы можаце проста ўсталяваць сярэдні фон на панэлі я думаю?
дададзена аўтар r3bel, крыніца
прабачце, абнавіў URL: jsfiddle.net/5dvgk/2
дададзена аўтар r3bel, крыніца
Вы можаце дадаць градыент да празрыстага, што існуе больш плаўны пераход, можа быць, вы ствараеце jsfiddle, калі я вас зразумеў няправільна? вось прыклад: jsfiddle.net/5dvgk/2
дададзена аўтар r3bel, крыніца

10 адказы

я б зрабіць гэта наступным чынам:

http://jsfiddle.net/5dvgk/5/

HTML:

    <div id="middle">
        <div id="content">
            Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
</div> </div> <div id="bottom"></div> </div>

css:

#panel {
    width: 330px;
    position: relative;
    background: url(http://oi44.tinypic.com/acoeo.jpg);
}

#top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: 170px;
    width: 100%;
    background: url(http://oi43.tinypic.com/2zedqqc.jpg)
}

#middle {   
    position: relative;
    z-index: 1;
    min-height: 300px;
    padding-left: 50px;
    padding-top: 70px;
    padding-bottom: 70px;
}

#bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    height: 170px;
    width: 100%;
    background: url(http://oi43.tinypic.com/34i0jeu.jpg);
}
3
дададзена
Дзякуй - гэта на самай справе працуе вельмі добра. Аднак ёсць адна праблема ў тым, што межы на самай справе ўтрымліваюць празрыстыя цені, таму #panel фонавы малюнак застаецца бачным пад #top і #bottom </код >. Любыя ідэі аб тым, як гэта выправіць?
дададзена аўтар GSTAR, крыніца

Змест будзе ніколі не ахопліваюць ўсё таму, што ўнутры сярэдняя панэль, а сярэдні пазіцыянуецца ніколі не заняць увесь #panel - перамясціць клавішы #content , каб быць у #panel элемент ...

<div id="panel">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
    <div id="content">
        Lorem ipsum, etc...
    </div>
</div>

Пазіцыя #middle выкарыстоўваючы пазіцыя: абсалютная; як #top і #bottom :

#panel {
    height: 400px; /* or 100% or whatever */
    width: 300px;
    position: relative;
}

#top,
#middle,
#bottom {
    left: 0;
    position: absolute;
    width: 100%;
}

#top {
    height: 100px;
    background: url(top.png) no-repeat;
    top: 0;
}

#middle {
    bottom: 100px;
    top: 100px;
    background: url(middle.png) repeat-y;
}

#bottom {
    bottom: 0;
    height: 100px;
    background: url(bottom.png) no-repeat;
}

#content {
/* any padding or anything */
    position: relative;
}

http://jsfiddle.net/trolleymusic/yqure/

3
дададзена
Гэта правільны адказ! Гэта працуе сапраўды гэтак жа, як мне гэта трэба, каб! Такое простае рашэнне! Я буду працягваць гэта праверыць, і хай вы ведаеце, як яна ідзе. Ура :)
дададзена аўтар GSTAR, крыніца
Не турбуйцеся, рады, што гэта не дапамагло.
дададзена аўтар Trolleymusic, крыніца

Чаму б вам не проста спрабаваць дадаць тры выявы ў адзін файл малюнка. Такім чынам, вам трэба толькі адзін DIV і ня хітры стыль.

2
дададзена
Ах, але тады верхнія і ніжнія малююнкі будуць расцягвацца з утрыманнем.
дададзена аўтар Albert Xing, крыніца

Як вы можаце бачыць з іншых адказаў ёсць на самай справе некалькі спосабаў зрабіць гэта.

Я вырашыў пайсці з чыстым CSS і трохі элемента «нясецца» з пазіцыяй: адносна. Акрамя таго, гэты метад не будзе працаваць, калі фонавы малюнак Кантэнту Скрынка сярэдняга ніколі празрыста ў галіне змесціва.

Я таксама выдаліў некаторыя непатрэбныя паплаўкі і пазіцыі абсалюту, так як гэтыя блокі могуць проста складаюць адзін на адзін:

Check out this fiddle, I tested it in IE9/FF/Chrome, but I'm sure it'll work at least down to IE6, as I've used this method before. http://jsfiddle.net/shayl/KwWjt/1/

enter image description here

Я павінен быў зрабіць здагадку аб вашай сярэдняй змесціва скрынкі і як вы хацелі, каб яна выглядала, але я выкарыстаў фонавы малюнак.


CSS
            #panel {
                width: 234px;
            }

            #top {
                height:49px;
                background: url(http://s7.postimg.org/f1usobsnf/top.gif) no-repeat;
                z-index:1;
            }

            #middle {
                position:relative;
                top:-20px;
                width: 134px;
                min-height: 200px;
                padding:0 50px 0 50px;
                background: url(http://s23.postimg.org/gups2v0wb/mid.gif) repeat-y;
                z-index:2;
            }

            #bottom {
                position:relative;
                top:-30px;
                height:49px;
                width: 100%;
                background: url(http://s12.postimg.org/s78huz5u5/bottom.gif) no-repeat;
                z-index:1;
            }

HTML
            <div id="panel">
                <div id="top"></div>

                <div id="middle">
                    <div id="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis condimentum lacus. Duis tempor bibendum ante, non luctus leo mollis vitae. Nunc in augue massa, ut facilisis velit. Etiam in magna lacus, in lacinia lectus. Nulla facilisi. Aenean rutrum, magna sed molestie condimentum, magna arcu ornare nisl, id luctus turpis felis ornare lorem. Aenean placerat erat in nisi convallis feugiat. Ut sodales tincidunt tellus, nec eleifend ligula posuere nec. Proin sit amet quam quam, mollis laoreet diam. Sed volutpat libero et velit commodo laoreet. Vestibulum eros dui, hendrerit molestie sodales eget, ullamcorper sed enim. Integer tempus, eros at dapibus ultricies, mauris risus sagittis metus, quis consequat massa mi quis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sagittis blandit odio, sed vulputate quam egestas id. 
                    </div>
                </div>

                <div id="bottom"></div>
            </div>
1
дададзена

У большасць сучасных браўзэраў, якія падтрымліваюць частка спецыфікацыі CSS3 вы можаце зрабіць гэта даволі лёгка з дапамогай CSS3 некалькі фоны , калі вам неабходна падтрымліваць старыя браўзэры, то ваш бягучы падыход ISN » т занадта дрэнна, вы павінны былі б абсалютна пазіцыянаваць верхнюю і ніжнюю DIV s, як вы ўжо зрабілі, а затым забяспечыць верхні і ніжні DIV 's робяць ззаду < код> DIV у сярэдзіне, усталяваўшы пазіцыя ўласцівасць ( Z-індэкс не працуе, калі пазіцыя не ўстаноўлены) а затым канкрэтна усталяваўшы іх Z-індэкс .

Вось <�моцны> jsFiddle дэманструе абодва падыходу бок бок. Адзін злева выкарыстоўвае CSS3 некалькі фонавым, іншыя адзін фіксаваны да версіі падыходу, ужо адбываецца ўжо.

<�Моцны> HTML

<div id="css3-multiple-backgrounds">Content goes here..</div>

<div id="any-browser-not-using-css3">
    <div class="top"></div>
    <div>Content goes here..</div>
    <div class="bottom"></div>
</div>

<�Моцны> CSS

#css3-multiple-backgrounds {
    background: url(https://dl.dropboxusercontent.com/u/6928212/dots.png) left top no-repeat,        
                url(https://dl.dropboxusercontent.com/u/6928212/dots.png) left bottom no-repeat,
                url(https://dl.dropboxusercontent.com/u/6928212/bg.png) center center repeat-y;
}
#any-browser-not-using-css3 {
    background: url(https://dl.dropboxusercontent.com/u/6928212/bg.png) center center repeat-y;
    position: relative;
}
#any-browser-not-using-css3 > div {
    position: relative;
    z-index: 2;
}
#any-browser-not-using-css3 > div[class] {
    position:absolute;
    background: url(https://dl.dropboxusercontent.com/u/6928212/dots.png) left top no-repeat;
    width: 100%;
    height: 50px;
    left: 0px;
    z-index: 1;
}
#any-browser-not-using-css3 > div.top {
    top: 0px;
}
#any-browser-not-using-css3 > div.bottom {
    bottom: 0px;
}
1
дададзена

Вам трэба будзе дадаць вобласць змесціва асобна ад таго, што я б назваў вобласць фону

Here's a fiddle http://jsfiddle.net/5dvgk/2/

Зрабіце што-нешта накшталт гэтага:

<div class="panel">
    <div class="background">
        <div class="top">
        </div>
        <div class="middle">
        </div>
        <div class="bottom">
        </div>
    </div>
    <div class="content">
        Your content goes here
    </div>
</div>

і ваш CSS будзе нешта накшталт гэтага

.panel {
    float: left;
    width: 300px;
    position: relative;
}
.background {
    width:100%;
    height:100%;
    z-index: 1;
}
.top {
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100%;
    background: url(top.png) no-repeat;
    z-index: 2;
}
.middle {
    position:absolute;
    top:0;
    left: 0;
    height:100%;
    width:100%;
    z-index: 1;
}
.bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: url(bottom.png) no-repeat;
    z-index: 2;
}
.content {
    float: left;
    width: 300px;
    position: relative;
    z-index: 4;
}
1
дададзена
Але OP мае патрэбу ў .content, каб ахапіць усю рэч, а не толькі сярэдняе ўтрымання.
дададзена аўтар ntgCleaner, крыніца
А што фонавы малюнак для сярэдняга ўтрымання?
дададзена аўтар ntgCleaner, крыніца
дададзена аўтар r3bel, крыніца
такі ж эфект, калі вы карыстаецеся кантэйнер ў якасці сярэдняга фону і сярэдняй частцы, як змест, толькі з меншай колькасцю HTML :)
дададзена аўтар r3bel, крыніца

Многія з прыведзеных вышэй варыянтаў патрабуе даволі складанага HTML/CSS. Вось прыклад, які патрабуе толькі два DIV тэгі і некаторыя CSS.

<�Моцны> HTML:

<div class="border">
  <div class="content">
    Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
Lorem ipsum, etc...
</div> </div>

<�Моцны> CSS

.border { 
    position: relative; 
    width: 234px;
    background: #fff url(http://i41.tinypic.com/axzj0o.jpg) top center repeat-y;
}
.border:before, .border:after {
    position: absolute; 
    content: '';
    display: inline-block;
    height: 53px; width: 234px;
}
.border:before {
    top: 0; left: 0;
    background: transparent url(http://i41.tinypic.com/2jgwn6.jpg) top center no-repeat;
}
.border:after {
    bottom: 0; left: 0;
    background: transparent url(http://i43.tinypic.com/vfiiag.jpg) bottom center no-repeat;
}
.border > .content { 
    background: transparent;
    position: relative;
    padding: 13px;
    z-index: 1;
}

Гэта рашэнне працуе, проста маючы 3 перакрываюцца графікі, як паказана ніжэй:

  1. Background

    Background http://i41.tinypic.com/axzj0o.jpg

  2. Top

    Top http://i41.tinypic.com/2jgwn6.jpg

  3. Bottom

    Bottom http://i43.tinypic.com/vfiiag.jpg

Фонавы малюнак наносіцца на знешнюю DIV , .border , і дапускаецца Паўтарыць-у (паўтор вертыкальна ўздоўж у вось). Уверх выявы прымяняецца да : перад псеўда-элемент, і ніжняе малюнак прымяняецца да : пасля таго, як псеўда-малюнкі.

Далей, .content DIV , : перад і : пасля , усе элементы Пазіцыя </код > Пад рэд так, што яны могуць мець Z-індэкс ўжываецца. Паколькі : перад і : пасля з'яўляюцца пазіцыя: абсалютная , яны больш не займаюць месца ў патоку - і, такім чынам, яны не ўплываюць на пазіцыянаванне з .content або адзін з адным.

Гэта азначае, што .content унутры- DIV пацячэ ў межах яго з бацькоў сама па сабе, запаўняючы да кутоў .border .

Тым не менш, гэта ўсё яшчэ павінна быць дадзена Z-індэкс: 1 для таго, каб з'явіцца перад : перад і : пасля таго, як элементы - што завяршае эфект.

Як вы можаце бачыць, я ўзяў на сябе смеласць Photoshopping вашых канкрэтных малюнкаў, так што вы можаце ўбачыць яго працу. Вось скрыншот выніку:

Вынік http://i39.tinypic.com/2z3ula8.jpg

А вось jsFiddle які дэманструе гэта працуе .

1
дададзена
Гэта выглядае як вельмі добрае рашэнне, але, верагодна, не працуе, як чакалася, калі глядзець на менш здольных браўзэраў, такіх як Internet Explorer. Дзякуй за тое, што знайшлі час, каб вырабіць гэтае рашэнне :)
дададзена аўтар GSTAR, крыніца
На самай справе - я адчуў яго ў IE10 ў рэжыме Стандарты/Quirks ўвесь шлях назад у IE7 і карэктна працуе ва ўсіх вышэй, і робіць ідэнтычна Chrome/Firefox. Адзіны раз, калі яна павінна ламацца наогул у версіях IE, якія не падтрымліваюць : перад і : пасля псеўда-элементы (такія, як 6). Акрамя гэтага, кожны біт гэтага CSS існуе ўжо больш за дзесяць гадоў і з'яўляецца цалкам стандартным ва ўсіх асноўных браўзэрах.
дададзена аўтар Troy Alford, крыніца

See this: jsFiddle

Вы можаце наладзіць маржу і ўсталюйце Дысплей: убудаваны блок; шырыня: --px; , калі вы хочаце.

<�Моцны> Змяніць

After reading the question again, I came up with this: http://jsfiddle.net/5dvgk/7/

0
дададзена

Калі ваша жаданне паспрабаваць CSS3 вы можаце ўжыць некалькі фонавым для аднаго тэга. Нягледзячы на ​​тое, што вы павінны быць асцярожныя, так як расцяг выявы з рознымі функцыямі, як вашыя зоркі вышэй, могуць быць скажоныя, выкарыстоўваючы гэты метад.

Я гуляў з прыкладам. Хоць гэта не здаецца, каб даць мне тое, што я шукаў, я быў блізкі да таго, што вы кажаце. Гэта было б выдатна, як на малюнках, якія градыент аснове і не маюць адметныя рысы. Тым не менш, любы малюнак расцягваецца занадта далёка заўсёды будзе прыводзіць да пікселізацыі. Большасць CSS я бачыў гэты гатунак стварае 1px шырокага градыент «так шмат» даўжыні. Расцяжэнне элементаў, як гэта цяжэй убачыць пікселізацыі ст.

<html>
<head>
 
</head>
<body>
    <div id="container">
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>

    </div>
</body>
</html>
0
дададзена
Каб пазбегнуць праблем расцягнутай верху/нізу малюнкаў, вы не маглі б проста выкарыстоўваць наканаваныя кропак замест адсоткаў па памеры?
дададзена аўтар caesay, крыніца

Я не ведаю, гэта можа сапраўды зроблена з чыстага CSS, але я хацеў бы зрабіць гэта так:

Наладзьце сваю 3 вобласці, а таксама дадаць штуршок:

<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="push"></div>
  <div id="bottom"></div>
</div>

Выдаліць змесціва з патоку:

#content { position: absolute; }

і вылічыць націскной вышыню:

h = $("#content").height() * 0.5;
$("#push").css( { "height": h } );

See this fiddle : http://jsfiddle.net/RM9NS/1/

0
дададзена