Jak mogę rozszerzyć tło elementu poza jego pojemnik?

Question

Mam element div zawierający znacznik h3 i chcę, aby tło h3 wykraczało poza znacznik div zawierający krawędź strony. Czy istnieje sposób, aby to zrobić w CSS?
Zastanawiałem się nad pozycjonowaniem h3, ale nie znam rozmiaru od krawędzi ekranu do krawędzi div (tam, gdzie chcę, żeby to było), ponieważ div jest wyśrodkowany.

Answer 1

Niestety to, co próbujesz zrobić, jest niemożliwe przy zwykłym CSS, ponieważ musisz znać odległość do prawej krawędzi. Bezwzględne pozycjonowanie będzie wtedy działało dobrze. Oczywiście, można to zrobić łatwo za pomocą niektórych JavaScript, a nawet łatwiejsze, jeśli przy użyciu jQuery:

$(function() { 
    $('h3').each(function() { 
     $(this).width($(window).width() - $(this).offset().left); 
    }); 
}); 

aw CSS:

h3 { 
    position: absolute; 
    ... 
} 

Answer 2

Tło elementów nie może wykraczać poza obwiednię.

W niektórych przypadkach można rozszerzyć pojemnik H3 poza jego pojemnik, ustawiając ujemne marginesy, ale potrzebna jest dokładna szerokość strony.

Wygląda na to, że po prostu chcesz przeorganizować swój HTML, aby było to możliwe.

Answer 3

Na tej stronie użyłem Firebug zmienić css pytanie postawione w tytule jest .

#question-header h2 { 
    background:lime; 
    margin-bottom:-1000px; 
    padding-bottom:1000px; 
} 

To, co się stało: alt text http://public.zastica.com/so-background.png

Jest # pytanie-header div, który rozciąga się tylko do górnej części pytania ("Mam div ..."). Kluczem jest posiadanie dużego dna wypełniającego i dużego (ujemnego) marginesu-dna.

Działa to również w przypadku tła z boku na bok. Musisz tylko upewnić się, że kontener nie ma zestawu overflow: hidden.

Edit: Aby uzyskać ten efekt w lewo i prawo, ustaw:

html { 
    overflow-x: hidden; 
} 

#question-header h2 { 
    padding: 0 1500px; 
    margin: 0 -1500px; 
} 

html { overflow-x: hidden; } zapobiega szerokość strony z coraz bardzo duże ze względu na dopełnienie.