Come centrare con su entrambi i lati sopra un’immagine di sfondo

Come creo centrato

con


su entrambi i lati su un’immagine di sfondo ?

Ho anche bisogno di gestire varie lunghezze di testo, scalare bene per la visualizzazione mobile e avere


andare alla larghezza del 100% del suo contenitore.

Voglio questo aspetto, ma su un’immagine di sfondo. testo su sfondo a tinta unita

Ci sono molte risposte ( qui , qui qui e qui ) per il testo con linee su entrambi i lati, ma tutte si basano sull’uso di un solido colore di sfondo dietro il testo, che non funziona per me come la pagina che voglio mettere questo su ha un’immagine di sfondo.

Ecco come raggiungo l’aspetto sopra, che gestisce varie lunghezze di testo e scala bene:

CSS

 .title-box { height: 2px; background-color: rgb(215, 0, 0); text-align: center; } .title-outer { background-color:rgb(230, 230, 230); position: relative; top: -0.7em; } .title-inner { margin:0px 20px; font-size: 17.5px; font-weight:bold; color:rgb(100, 100, 100); } 

HTML

 
OUR STORY

Ho provato il metodo qui sotto e funziona, ma non gestisce varie larghezze di testo o scala bene a causa della

e


s in s separati

s:

testo sull'immagine di sfondo

HTML

 

OUR STORY


Nota: questo è un esempio che utilizza il sistema di griglia Bootstrap ma che non fa parte del problema / soluzione.

Quindi, qualche idea su come posso ottenere lo stesso aspetto e comportamento, ma senza il colore di backgound per il testo in modo che possa sedersi su un’immagine di sfondo?

Non c’è bisogno di JS, ecco una soluzione CSS pura.

CSS

 .title-hr hr { display: inline-block; width: 30%; margin: 5px 10px; border-top: 1px solid #e5e5e5; } 

HTML

 


My Title

Risultato: http://jsfiddle.net/yptmftr4/

Ok, ho giocato un po ‘con questo codice ed ecco la mia soluzione. Sì, è un po ‘sporco perché ho usato :before e :after , ma funziona.

HTML

 
OUR LOOOoo oooo oOONG STORY
OUR STORY
STORY

CSS

 .title-box { text-align: center; } .title-inner { margin:0px 20px; font-size: 17.5px; font-weight:bold; position: relative; color:rgb(100, 100, 100); } .title-inner:after, .title-inner:before { content:""; float: right; position: relative; top: 8px; height: 2px; background: red; } .title-inner:before { float: left; } 

jQuery

 $(document).ready(function () { function work() { $(".title-inner").each(function () { var full_width = $(window).width(); var id = $(this).attr("id"); var title_width = $("#" + id).width(); var new_width = (full_width - title_width) / 2 - 40; $('head').append(""); }); } work(); $(window).resize(function () { work(); }); }); 

http://jsfiddle.net/ffb3X/4/

Perché :before e :after non fanno parte del DOM, ho usato la funzione .append() per aggiungere tag di stile in testa per ogni titolo.

Questo codice caricherà a pagina tutto, quindi è reattivo.

Questo codice è stato pubblicato originariamente da Arbel ma la sua risposta è scomparsa per qualche motivo? Lo sto ripubblicando (compresi alcuni mod che ho realizzato) perché è stata la soluzione che ho finito per usare. Credito in cui è dovuto il credito.

Working jsFiddle: http://jsfiddle.net/pA5Gu/

HTML

 
OUR STORY

CSS

 .title-box { background-image: url('http://sofit.miximages.com/html/1302-green-bubbles-awesome-background-wallpaper.jpg'); height:100%; } .title-outer { border-top:2px solid rgb(215, 0, 0); background-color: transparent; } .title-inner { width:auto; padding:0px 20px; border: 0; background-color: transparent; font-size: 17.5px; font-weight:bold; color:rgb(255, 255, 255); } 

jQuery

 $(document).ready(function() { var legendWidth = $('#titleInner').outerWidth(); var margin = 'calc((100% - '+legendWidth+'px) / 2)'; $('#titleInner').css('margin-left', margin); $('#titleInner').css('margin-right', margin); }); 

http://jsfiddle.net/habo/HrfuH/1/

 

OUR STORY


.myContent{ display:block; width:600px; margin:0 auto; } .title-box { background:#eee; height:60px; } .title-outer{ } hr { height: 2px; background-color:rgb(215, 0, 0); margin: 2em 0; width:25%; float:left; } .title-inner { margin:0px 20px; font-size: 17.5px; font-weight:bold; color:rgb(100, 100, 100); float:left; }