☰

背景画像のCSSをストレッチしますか? 質問する

tag-icon • tag-icon html css background
背景画像の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>

ベストアンサー1

.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+
  • Chrome 何でも+
  • IE9以上
  • 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 Coyierhttp://css-tricks.com/perfect-full-page-background-image/

おすすめ記事