封面

展開圖片、影片或 iframe 以覆蓋整個容器，並將您自己的內容放置在頂部。

用法

要讓圖片覆蓋其父元素，請將 .uk-cover-container 類別新增至父元素，並將 uk-cover 屬性新增至圖片。

<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>

注意要將內容定位在覆蓋元素的頂部，請使用定位元件。為了讓您的內容更清晰可見，請新增反向元件中的 .uk-light 或 .uk-dark 類別。

<div class="uk-cover-container uk-height-medium">
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

影片

要建立覆蓋其父容器的影片，請將 uk-cover 屬性新增至影片。將容器元素包覆在影片周圍，並新增 .uk-cover-container 類別以裁剪內容。

封面元件會繼承影片元件的所有屬性，這表示影片會靜音並自動播放。影片會在不可見時暫停，並在再次可見時恢復播放。

<div class="uk-cover-container">
    <video uk-cover></video>
</div>

<div class="uk-cover-container uk-height-medium">
    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
</div>

Iframe

要將封面元件套用至 iframe，您需要將 uk-cover 屬性新增至 iframe。現在，將 .uk-cover-container 類別新增至 iframe 周圍的容器元素以裁剪內容。

<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>

<div class="uk-cover-container uk-height-medium">
    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="1920" height="1080" allowfullscreen uk-cover></iframe>
</div>

響應式高度

要為您的封面圖片新增響應式行為，您需要建立一個不可見的 <canvas> 元素，並根據您希望覆蓋區域具有的長寬比，將 width 和 height 值指派給它。這樣它就會調整圖片的響應式行為。

<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>

<div class="uk-cover-container">
    <canvas width="400" height="200"></canvas>
    <img src="images/dark.jpg" alt="" uk-cover>
</div>

視窗高度

新增來自高度元件的 uk-height-viewport 屬性，會將父元素的高度延伸以填滿整個視窗。

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

元件選項

這些選項中的任何一個都可以套用至元件屬性。用分號分隔多個選項。了解更多

選項	值	預設值	描述
`automute`	布林值	true	嘗試自動將 iframe 的影片靜音。
`width`	數字		元素的寬度。
`height`	數字		元素的高度。

JavaScript

了解更多關於JavaScript 元件。

初始化

UIkit.cover(element, options);

文件

封面