# 覆盖/Cover 扩展图片或视频至覆盖整个容器。 这个组件允许你使用图片、对象甚至iframe（images, objects or even iframes）来创建全屏效果。无论是什么元素，它都将垂直居中、水平居中并且不会失去原有的比例即实现覆盖它的容器。你还可以在图片或者视频上面放入附加内容，比如文字或图片等。 * * * ## 用法 这个覆盖组件具有不同的用法，取决于你究竟是使用的背景图片、对象或者iframe。最简单的方式就是为带有背景图片的 `&lt;div&gt;` 元素添加 `.uk-cover-background` 类。 ### Example  ### Markup ``` <div class="uk-cover-background">...</div> ``` * * * ## 视频 创建一个覆盖它的父容器的视频，添加 `.uk-cover-object` 类到视频。然后用一个容器元素包裹视频并为该容器添加 `.uk-cover` 类来裁剪内容。 ### Example <video class="uk-cover-object" width="600" height="400" autoplay="" loop="" muted="" controls=""><source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4"> <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test1" type="video/ogg"></video> ### Markup ``` <div class="uk-cover"> <video class="uk-cover-object" width="" height=""> <source src="" type=""> </video> </div> ``` * * * ## Iframe 要将覆盖组件应用到 iframe ，你只需要为 iframe 添加 `data-uk-cover` 属性。然后，再添加 `.uk-cover` 类到包含iframe的容器来裁剪内容。 ### Example <iframe data-uk-cover="" src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen=""></iframe> ### Markup ``` <div class="uk-cover"> <iframe data-uk-cover src="" width="" height="" frameborder="0" allowfullscreen></iframe> </div> ``` * * * ## 响应式 为覆盖图片添加响应式行为，你需要添加 `.uk-invisible` 类到 `&lt;img&gt;` 元素，并将它放在覆盖元素内部。这样的话，它就能适应图片的响应式行为了。 注意 添加 [效果组件](utility.html) 中的 `.uk-height-viewport` 类，会扩展父容器的高度填满整个视口。 ### Example  ### Markup ``` <div class="uk-cover-background"> <img class="uk-invisible" src="" width="" height="" alt=""> </div> ``` * * * ### 视频 为视频添加响应式行为，你同样需要为覆盖容器添加 `.uk-position-relative` 类，并将 `.uk-position-absolute` 类添加到覆盖对象上。对于irame也是这样操作。 #### Example <video class="uk-cover-object uk-position-absolute" width="600" height="400" autoplay="" loop="" muted="" controls=""><source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test2" type="video/mp4"> <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test2" type="video/ogg"></video> #### Markup ``` <div class="uk-cover uk-position-relative"> <img class="uk-invisible" src="" width="" height="" alt=""> <video class="uk-cover-object uk-position-absolute" width="" height=""> <source src="" type=""> </video> </div> ``` * * * ## 内容的定位/Position content 你还能在覆盖元素上面绝对定位内容。要实现这个效果，只需添加 [效果组件](utility.html) 中的 `.uk-position-cover` 类到图片或视频后面的容器元素。如果想要实现垂直居中并且水平居中，那就使用 [Flex 组件](flex.html) 吧。 ### Example  ### Markup ``` <div class="uk-cover-background uk-position-relative"> <img class="uk-invisible" src="" width="" height="" alt=""> <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">...</div> </div> ```