1

我在网上搜索了解决方案，但他们都在谈论如何为整个页面设置背景......但我需要填写页面的某个部分......我该怎么做？

这是我们所拥有的......在我们的页面上，我们有几个不同的部分，在其中一个部分中，我需要将图像的背景大小设置为“cover”（这是我唯一一次使用此属性）。这是我用来生成 img 标签的 php 函数：

function getRandomFeatureVideo()
{
// Youtube feed
$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/playlists/A4F160EDF82713A2?v=2');
.
.
.
.
$media = $entry->children('http://search.yahoo.com/mrss/');
  
  // get video player URL
  $attrs = $media->group->player->attributes();
  $watch = $attrs['url'];
  
  $attrs = $media->group->thumbnail[1]->attributes();
  $thumbnail = $attrs['url'];
  $counter++;

  if($counter == $rand)
    { break; }

  $result .='<a rel="prettyVideos"  href="'.$watch.'">
                <img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" />
       </a> ';      
    
echo $result;                    
}

和 CSS：

.slideshow .video img
{   
cursor:pointer;
width:550px !important;     
height:340px !important;     
background-repeat:no-repeat;    
background-size:cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
-ms-interpolation-mode: bicubic;
}

到目前为止，它的工作方式与我在 Chrome、Safari、Firefox 和 Opera 中所希望的完全一样。 在此处输入图像描述

然而，像往常一样，它在 IE 中搞砸了 (7/8) 在此处输入图像描述

我怎样才能解决这个问题？

4

3 回答 3

2

IE7 不支持background-size任何方式。它只能以自然大小显示图像。

解决这个问题的唯一方法是切换到使用<img>标签，并将其放在元素后面，使其看起来好像是背景。

你可以在你的代码中做到这一点；这并不难。但是background-size在其他所有浏览器中浪费该功能的存在将是一种耻辱。

所以我首选的解决方案是使用 polyfill Javascript，它将回填旧版本 IE 中的功能，以便您可以继续使用标准 CSS。

你可以试试这个：https ://github.com/louisremi/jquery.backgroundSize.js

希望有帮助。

于 2012-07-25T21:00:03.547 回答
0

我不得不放弃这个问题来处理其他事情，但我认为应该给你们一个关于这个的更新。这个问题是（某种）固定的......不是一个可靠的解决方案，但它正在使用这个简单的解决方案。

所以这是修改后的CSS...

.slideshow .video img { cursor:pointer; width:550px !important;
height:340px !important; -moz-background-size:cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center;}

和IMG标签...

<img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" style="background-repeat: no-repeat" style="background-size:cover"/>

（我知道这很混乱！）感谢 Spudley、Shadowizoo、BoltClock 和 Ben 的时间和建议。

于 2013-05-21T21:36:20.277 回答
0

我发现有人有类似的问题。也许你可以检查一下：internet explorer 7 中的 css background-size cover

于 2012-07-25T19:51:13.327 回答