Rozciągnąć obraz tła 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>

To jest mój skrypt CSS

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

Chcę rozciągnąć background-imagecałą <td>komórkę

html css background Buffon
źródło

Tylko uwaga, że rozciąganie obrazów rastrowych obniża jakość.

wdm

2

duplikat stackoverflow.com/questions/376253/ ...

Alex Shesterov

@wdm: pogorszenie jakości nie nastąpi, jeśli jest to plik svg.

posit labs

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;
}

Pracuje w:

Safari 3+
Chrome Cokolwiek +
IE 9+
Opera 10+ (Opera 9.5 obsługuje rozmiar tła, ale nie słowa kluczowe)
Firefox 3.6+ (Firefox 4 obsługuje wersję z prefiksem innych producentów)

Ponadto możesz spróbować tego dla rozwiązania IE

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

Podziękowania dla tego artykułu autorstwa Chrisa Coyiera http://css-tricks.com/perfect-full-page-background-image/

Blowsie
źródło

to działa dobrze, ale chcę rozciągnąć wysokość tylko jak mogę to zrobić

Buffon

3

dzięki za pomoc, gdy zmienię to w kodzie -moz-background-size: 100% 100%;, działa tak, jak chcę ... dziękuję

Buffon

1

Kolejne rozwiązanie IE8 i niższe: github.com/louisremi/background-size-polyfill

Irongaze.com

6

pracował dla mnie po zmianie background-size: cover;na `background-size: 100% 100%;`

ivan.mylyanyk

1

Potrzebowałem stałej wysokości (130 pikseli) i pełnej szerokości. To zadziałało: background: url("images/bg.jpg") no-repeat center 0 fixed;i background-size: 100% 130px;(itp.). Wyśrodkowanie wysokości (jak w odpowiedzi) spowoduje ukrycie tła, jeśli będzie wystarczająco krótkie.

sleeparrow

62

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

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

Możesz określić tylko szerokość lub wysokość za pomocą:

background-size: 100% 50%;

Co spowoduje rozciągnięcie go na 100% szerokości i 50% wysokości.

Obsługa przeglądarek: http://caniuse.com/#feat=background-img-opts

Calum
źródło

1

Wow, to zadziałało idealnie dla mnie - wypróbowałem inne odpowiedzi i szereg różnych technik. Ale to było takie proste i zadziałało natychmiast. Dziękuję: D

DylanT 25

11

Nie możesz rozciągnąć obrazu tła (do CSS 3).

Musiałbyś użyć pozycjonowania bezwzględnego, abyś mógł umieścić znacznik obrazu wewnątrz komórki i rozciągnąć go tak, aby obejmował całą komórkę, a następnie umieścić zawartość na górze obrazu.

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>

Rozwiń fragment

Guffa
źródło

1

+1, dobrze. Jest to również dobry pomysł, aby owinąć <img>z <div>mającego position: relative;a maksymalna szerokość / wysokość. Sam TD nie jest pozycjonowany względnie we wszystkich przeglądarkach, jeśli w ogóle.

madr

Walczyłem

9

Myślę, że to, czego szukasz

.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;
}

failed_hard
źródło

to jest dokładnie to, czego potrzebuję!

Rachelle Uy

0

Działa to bez zarzutu @ 2019

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

Mujeeb Ishaque
źródło

-7

Po prostu wklej to do swojej linii kodów:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

LumiereNG
źródło

Rozciągnąć obraz tła CSS?

Odpowiedzi: