web-dev-qa-db-ja.com

ストレッチ背景画像の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>を引き伸ばしたい

htmlcssbackground
160
Buffon
.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なんでも+
  • 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/

273
Blowsie

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

54
Calum

背景画像を引き伸ばすことはできません（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>
9
Guffa

探しているものは

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

これは完璧に動作します@ 2019

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