Domanda Come utilizzare l'immagine di sfondo reattiva in css3 in bootstrap


Non voglio usare il tag html. Questo è il mio css. Sto usando Bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

Lo zoom al 100% è OK. ma quando ingrandisco il 180% circa, l'immagine sarà corta dall'alto e dal basso, voglio alcuni trucchi css.


44
2017-09-04 11:30


origine


risposte:


Per lo sfondo dell'immagine, controlla questo:

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

68
2017-09-04 11:34



Devi usare background-size: 100% 100%;

dimostrazione

Demo 2 (Non si allungherà, questo è quello che stai facendo)

Spiegazione: è necessario utilizzare 100% 100% come si prepara X COSÌ COME Y, stai ambientando 100% solo per il X parametro, quindi lo sfondo non si estende verticalmente.


Tuttavia, l'immagine si allungherà, non sarà reattiva, se si vuole allungare il background in proporzione, puoi cercare background-size: cover; ma IE creerà problemi per voi in quanto è proprietà CSS3, ma sì, è possibile utilizzare CSS3 Pie come polyfill. Inoltre, usando cover ritaglierà la tua immagine.


17
2017-09-04 11:35



Ho trovato questo:

Pieno

Un modello di sfondo delle immagini a pagina intera facile da usare per i siti Web Bootstrap 3

http://startbootstrap.com/template-overviews/full/

o

usando nel tuo contenitore principale:

html

<div class="container-fluid full">


</div>

css:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}

9
2018-06-13 14:51



Controllalo,

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

4
2017-12-31 15:39



Il percorso del file 'images/ip-box.png' implica che il css file è allo stesso livello delle immagini cartella.

Probabilmente è più comune avere cartelle 'images' e 'css' allo stesso livello del file 'index.html'.

In tal caso, il file css era di un livello inferiore nella rispettiva cartella, quindi il percorso verso ip-box.jpg come specificato nel file css sarebbe: '../images/ip-box.png'


1
2018-01-13 12:01



Prova questo:

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}

1
2017-10-15 11:11



Imposta sfondo reattivo e user friendly

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>

0
2017-07-20 11:45