如何使用 CSS 隐藏 Flash 对象的特定部分？答案

【问题标题】：How to Hide Specific Part of Flash Object Using CSS?如何使用 CSS 隐藏 Flash 对象的特定部分？
【发布时间】：2010-11-19 06:07:17
【问题描述】：

我正在将 Soundclick 的 Flash 音乐播放器嵌入我的音乐网站。我有一个放置播放器的固定空间。问题是该网站提供的玩家太大了。我只需要显示 Flash 播放器的底部。有没有办法使用溢出隐藏它：隐藏；方法？

到目前为止我已经尝试过：

我将嵌入代码放入一个 div 容器中并使用了“overflow:hidden;”方法，然后设置一个固定的宽度和高度。它部分工作，但只显示上半部分。这是没用的，因为下半部分是播放列表和按钮所在的位置。

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyOTAwNzA2MzY3MzkmcHQ9MTI5MDA3MTMwNTU4NyZwPTE1ODM2MSZkPSZnPTEmbz*5ZWIxNmMyMWQ5NmQ*YWJlODYy/YzdlMmM4NmM4NzMwNCZvZj*w.gif" /><div style="width:300px; height:450px; overflow:hidden;"><center><div><embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /></div><div style="width: 300px; position: relative; top: -390px;"><a href="http://www.soundclick.com/bands/default.cfm?bandID=650303"><img src="http://www.soundclick.com/images/navigation/blank1x1.gif" border="0" width="300" height="250"></a> </div></center></div>

【问题讨论】：

标签： css properties

【解决方案1】：

我用过很多次你描述的技巧，总觉得有点内疚。

但我不断发现最简单和最可靠的方法是将我的嵌入（从 js、iframe 生成，无论小部件可能使用什么）包装在一个 div 中，然后我限制宽度和高度。最后使用负边距将对象拉起并移出视线。

#container {
   width:475px;
   height:65px;
   overflow:none;
}
#container embed {
   margin-top:-85px;
   margin-left:-145px;
}

我发现它是找到我的对象所在位置的最简单方法，并且它很方便，因为有时小部件具有流体宽度 (100%) 并且使用左右负边距拉出侧面效果很好，你不需要为一些界面开发人员可能会挑剔的定位而烦恼。

（我经常为 facebook likebox 这样做 - 正如您在 earmilk.com 的右上角看到的那样）

【讨论】：

+1 承认有罪，让人们远离定位并提供示例：)
好的，非常感谢。我显然还是个新手。我不知道我需要有一个单独的嵌入类。

【解决方案2】：

或许可以试试：

#flash_object_container {
  position:relative;
}
#flash_object {
  position:absolute;
  bottom:0;
}

这将在容器内自下而上渲染 flash 对象，结合溢出和显式高度应该可以修复它。

编辑（如您提供的代码）：

  <div style="width:300px; height:450px; overflow:hidden;">

可以改为：

  <div style="width:300px; height:450px; overflow:hidden; **position:relative;**">

然后：

<div> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div>

变成：

<div **style="position:absolute; top:-YOUR_PX_VALUE;"**> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div>

【讨论】：

比我的答案更好的解决方案。
实际上，我认为您的两个答案都同样有用:)

【解决方案3】：

使用您尝试过的方法，尝试将 flash 对象定位为负数。（top="-50px;" 或任何你需要的东西。

【讨论】：