Allunga l'immagine di sfondo css?


176
<td class="style1" align='center' height='35'>
  <div style='overflow: hidden; width: 230px;'>
    <a class='link' herf='' onclick='topic(<?=$key;?>)'>
      <span id='name<?=$key;?>'><?=$name;?></span>
    </a>
  </div>
</td>

Questo è il mio script CSS

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

Voglio allungare il background-imagetutto su tutta la <td>cella


Solo una nota che allungando le immagini raster la qualità peggiora.
wdm,


@wdm: il degrado della qualità non si verificherà se si tratta di uno svg.
posit lab

Risposte:


297
.style1 {
  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;
}

Funziona in:

  • Safari 3+
  • Chrome Qualunque sia +
  • IE 9+
  • Opera 10+ (Opera 9.5 ha supportato la dimensione dello sfondo ma non le parole chiave)
  • Firefox 3.6+ (Firefox 4 supporta la versione con prefisso non vendor)

Inoltre puoi provare questo per una soluzione IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Ringraziamo questo articolo di Chris Coyier http://css-tricks.com/perfect-full-page-background-image/


funziona bene ma voglio allungare l'altezza solo come posso farlo
Buffon

3
grazie per aiutarlo a funzionare quando cambio che nel tuo codice -moz-background-size: 100% 100%;funziona come voglio ... grazie
Buffon

1
Un'altra soluzione IE8 e inferiore: github.com/louisremi/background-size-polyfill
Irongaze.com

6
ha funzionato per me dopo aver cambiato background-size: cover;in "dimensione sfondo: 100% 100%;"
ivan.mylyanyk

1
Avevo bisogno di un'altezza fissa (130px) e larghezza completa. Questo ha funzionato: background: url("images/bg.jpg") no-repeat center 0 fixed;e background-size: 100% 130px;(ecc.). Centrare l'altezza (come nella risposta) nasconderebbe lo sfondo se fosse abbastanza corto.
sleeparrow,

62

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

.style1 {
  ...
  background-size: 100%;
}

Puoi specificare solo larghezza o altezza con:

background-size: 100% 50%;

Che lo allungherà del 100% della larghezza e del 50% dell'altezza.


Supporto per browser: http://caniuse.com/#feat=background-img-opts


1
Wow, ha funzionato perfettamente per me: ho provato le altre risposte e una serie di tecniche diverse. Ma questo è stato così semplice e ha funzionato all'istante. Grazie: D
DylanT 25

11

Non è possibile allungare un'immagine di sfondo (fino a CSS 3).

Dovresti utilizzare il posizionamento assoluto, in modo da poter inserire un tag immagine all'interno della cella e allungarlo per coprire l'intera cella, quindi posizionare il contenuto sopra l'immagine.

table {
  width: 230px;
}

.style1 {
  text-align: center;
  height: 35px;
}

.bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.bg .linkcontainer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
}
<table cellpadding="0" cellspacing="0" border="10">
  <tr>
    <td class="style1">
      <div class="bg">
        <img src="http://placekitten.com/20/20" alt="" />
        <div class="linkcontainer">
          <a class="link" href="#">
            <span>Answer</span>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>


1
+1, corretto. E 'anche una buona idea per avvolgere il <img>con un <div>avere position: relative;larghezza / altezza e la massima. Il TD stesso non è posizionato relativamente in tutti i browser, se presenti.
madr

Stavo lottando con IE, +1 per quello
arjuncc

9

Penso che quello che stai cercando sia

.style1 {
  background: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

questo è esattamente quello di cui ho bisogno!
Rachelle Uy,

0

Funziona perfettamente @ 2019

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

-7

Basta incollarlo nella riga di codici:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.