blocks|key|715300|text|不能拉伸背景图像(直到CSS+3)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715301|您必须使用绝对定位，以便您可以在单元格内放置一个图像标记，并将其拉伸以覆盖整个单元格，然后将内容放在图像的顶部。|715302|​|715303|table+{
++width:+230px;
}

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

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

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

.bg+.linkcontainer+{
++position:+absolute;
++left:+0;
++top:+0;
++overflow:+hidden;
++width:+100%25;
}|code-block|syntax|javascript|715304|<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>|715305|715306|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can't stretch a background image (until CSS 3).</p>

<p>You would have to use absolute positioning, so that you can put an image tag inside the cell and stretch it to cover the entire cell, then put the content on top of the image.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellpadding="0" cellspacing="0" border="10"&gt;
  &lt;tr&gt;
    &lt;td class="style1"&gt;
      &lt;div class="bg"&gt;
        &lt;img src="http://placekitten.com/20/20" alt="" /&gt;
        &lt;div class="linkcontainer"&gt;
          &lt;a class="link" href="#"&gt;
            &lt;span&gt;Answer&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|931351|text|我想你要找的是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|931352|.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;
}|code-block|syntax|javascript|931353|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think what you are looking for is</p>

<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>


blocks|key|715378|text|只需将以下代码粘贴到您的代码行中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715379|<meta+http-equiv="X-UA-Compatible"+content="IE=Edge"+/>|code-block|syntax|javascript|715380|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just paste this into your line of codes:</p>

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
</code></pre>


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

<p>This is my CSS script</p>

<pre class="lang-css prettyprint-override"><code>.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}
</code></pre>

<p>I want to stretch the <code>background-image</code> all over the <code>&lt;td&gt;</code> cell</p>


Stretch background image css?

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

问拉伸背景图像css？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问拉伸背景图像css？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问拉伸背景图像css？
EN