배경 이미지 CSS 확장?

배경 이미지 CSS 확장?

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

이것은 내 CSS 스크립트입니다.

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

저는 스트레칭을 하고 싶습니다.background-image온 세상에<td>감방

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

작업 위치:

• 사파리 3+
• 크롬 무엇이든+
• IE 9+
• Opera 10+ (Opera 9.5 배경 크기 지원, 키워드 제외)
• Firefox 3.6+(Firefox 4는 비벤더 접두사 버전 지원)

또한 IE 솔루션을 사용해 볼 수 있습니다.

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

Chris Coyier http://css-tricks.com/perfect-full-page-background-image/ 의 이 기사에 대한 공로를 인정합니다.

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

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

너비 또는 높이만 지정할 수 있습니다.

background-size: 100% 50%;

폭은 100%, 높이는 50%로 늘어나게 됩니다.

---

브라우저 지원: http://caniuse.com/ # feat= background-img-opts

(CSS 3까지) 배경 이미지를 확장할 수 없습니다.

셀 내부에 이미지 태그를 넣고 전체 셀을 덮도록 늘인 다음 이미지 위에 내용물을 올릴 수 있도록 절대 위치 지정을 사용해야 합니다.

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>

제 생각에 당신이 찾는 것은

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

다운로드 받은 이미지를 사용하면 이를 파악하는 데 반나절이 걸렸습니다."images" 폴더를 기본 폴더에 추가합니다.

CSS:

background-images: url(/images/{imagename}.jpg);
background-repeat: no repeat; (if repeat)
background-size: cover;

좋은하루 :D

코드 라인에 붙여넣기만 하면 됩니다.

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

언급URL : https://stackoverflow.com/questions/5662735/stretch-background-image-css