/ / viac obrázkov pozadia s pretečením lineárneho gradientu - css3, twitter-bootstrap-3, pozadie-obrázok

viaceré obrázky na pozadí s preplnením lineárneho gradientu - css3, twitter-bootstrap-3, pozadie-obrázok

môj codepen zobrazuje tento úvodný obrázok pozadias druhým viacnásobným pozadím na pozadí s lineárnym gradientom. Problém je, keď je veľkosť prehliadača zmenšená, obraz je zmenšený a lineárny gradient zostáva rovnaký. Ako môžem dynamicky zmeniť výšku gradientu tak, aby zodpovedala výške 1. pozadia? tu zadajte popis obrázku

Poznámka: Nechcem používať background-size: cover pretože odrezáva príliš veľa z obrázka.

Vzdialenosť tela (farba: # 454545) medzi navbar a obrázok pozadia sa javí ako zvláštna pre kódovanie. Nezobrazuje sa pri spustení lokálnej webovej stránky.

odpovede:

1 pre odpoveď č. 1

Na základe mojich skúseností CSS nie je tak flexibilné, keď sa okolité prostredie zmení. V mojej mysli sa objavujú dve riešenia.

  1. Použitie JS na dynamické pridávanie inline CSS na základe aktuálnej veľkosti boxu
  2. Vytvorte viacero dopytov médií na základe vašich potrieb