拉伸背景图像css?

643ylb08  于 2023-01-06  发布在  其他
关注(0)|答案(6)|浏览(213)
<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;
}

我想在<td>单元格上拉伸background-image

rggaifut

rggaifut1#

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

工作领域:

  • Safari 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/

bgtovc5b

bgtovc5b2#

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

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

可以使用以下命令仅指定宽度或高度:

background-size: 100% 50%;

它会拉伸100%的宽度和50%的高度。

**浏览器支持:**caniuse.com/#feat=background-img-opts

cs7cruho

cs7cruho3#

你不能拉伸背景图像(直到CSS3).
您必须使用绝对定位,以便可以将图像标记放在单元格内并将其拉伸以覆盖整个单元格,然后将内容放在图像的顶部。

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

ukqbszuj4#

我觉得你要找的是

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

g6ll5ycj5#

使用下载的图像,花了半天才弄明白这一点。制作一个"图像"文件夹并将其添加到主文件夹中。
CSS:背景图像:网址(/images/{图像名称}. jpg);背景重复:不重复;(如果重复)背景大小:盖;
日安:D

gev0vcfq

gev0vcfq6#

只需将以下内容粘贴到您的代码行中:

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

相关问题