這是目前的主頁預(yù)覽圖。上一個(gè)版本帶有學(xué)校logo，根據(jù)比賽規(guī)則，刪掉了學(xué)校logo。

圖片背景

也就是將圖片作為背景。
這個(gè)需求產(chǎn)生的場景是：如果直接用img標(biāo)簽顯示界面左上角的logo，那么鼠標(biāo)右鍵是可以直接選中圖片的，也可以通過拖動(dòng)的方式選中，跟文字一樣。

而對于大多數(shù)現(xiàn)代化網(wǎng)頁，左上角的logo都是只能點(diǎn)，不能選的。右鍵顯示的也是打開鏈接，而非打開圖片。

因?yàn)橐獙?shí)現(xiàn)一個(gè)跳轉(zhuǎn)鏈接的效果，所以logo需要定義為<a>標(biāo)簽<a class="logo" href="/"></a>
<a>標(biāo)簽屬于行內(nèi)元素，里面可以嵌套塊級元素。
但我只想精簡的通過一個(gè)<a>標(biāo)簽實(shí)現(xiàn)logo顯示和跳轉(zhuǎn)鏈接。那么就需要定義成block塊級元素。
定義成塊級元素的原因包括：

• 完全控制寬高：行內(nèi)元素的寬高取決于元素內(nèi)部嵌套的標(biāo)簽內(nèi)容，本標(biāo)簽只想顯示logo，不想嵌套內(nèi)容。背景圖片填充也需要知道所在容器的寬高。
• 獨(dú)立元素：我不希望導(dǎo)航欄的其他元素會和logo重疊，需要占據(jù)空間。

.logo {
  display: block;
  position: relative;
  height: 100%;
  font-size: 39px;
  width: 44px;
  background-image: url('@/assets/image/CCCC.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}

• background-position: left;背景圖片靠左顯示，其實(shí)居中也可以。
• background-repeat: no-repeat;不重復(fù)，只顯示一個(gè)。
• background-size: contain;恰好包含在父容器中。不會被裁剪。

為什么已經(jīng)指定了background-size: contain;還要設(shè)置height: 100%;？

• background-size設(shè)置的是背景。溢出部分會被隱藏。標(biāo)簽內(nèi)沒有內(nèi)容，寬高默認(rèn)都是0。背景圖片會全部隱藏，無法顯示。

親測只設(shè)置height，不設(shè)置width，也可以顯示。為什么還要設(shè)置寬度？
可以加一個(gè)background-color輔助調(diào)試。

目前l(fā)ogo是塊級元素，會導(dǎo)致導(dǎo)航欄的剩余內(nèi)容沒有地方存放，因此需要指定寬度。

視頻背景

視頻背景的思路是，創(chuàng)建一個(gè)視頻元素，置于底層，靜音、自動(dòng)播放。

<div class="videoBackground">
  <video autoplay loop muted>
    <source src="@/assets/video/beautifulChicken.mp4" type="video/mp4">
  </video>
</div>

在圖片背景顯示logo中，用于顯示背景圖片的標(biāo)簽直接作為了最外層標(biāo)簽。
但在視頻背景中，不能直接將video標(biāo)簽作為最外層標(biāo)簽。
原因包括：

• 作為視頻背景，需要設(shè)置寬高為100%。但視頻100%可能會溢出父元素，而且是相對窗口大小的溢出。無論多大的窗口，都對多出一段滾動(dòng)條。需要設(shè)置一個(gè)與視圖大小相同的div標(biāo)簽，設(shè)置為overflow: hidden;

代碼中各標(biāo)簽及屬性的作用：

• autoplay：自動(dòng)播放，但可能被攔截。
• loop：循環(huán)播放。
• muted：靜音播放。
• source：視頻源，瀏覽器會按順序查找，播放第一個(gè)可用的視頻源。

這一段的作用是全屏覆蓋。
overflow的作用前面有提到，需要裁剪多余的部分。
z-index的作用是確保視頻能顯示在最底層。并且顯然，右鍵網(wǎng)頁也不會出現(xiàn)視頻控件的提示，更好地實(shí)現(xiàn)“作為背景”這一需求。

object-fit是設(shè)置填充方案，以下引用自MDN文檔：

• contain：被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比。整個(gè)對象在填充盒子的同時(shí)保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
• cover：被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應(yīng)內(nèi)容框。
• fill：被替換的內(nèi)容正好填充元素的內(nèi)容框。整個(gè)對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應(yīng)內(nèi)容框。
• none：被替換的內(nèi)容將保持其原有的尺寸。
• scale-down：內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰得到的對象尺寸會更小一些。

組件過渡動(dòng)畫

頁面中的文字也有過渡動(dòng)畫，gif原因畫質(zhì)比較差。

動(dòng)畫的原理就是，
編寫一個(gè)class，描述開始狀態(tài)。編寫一個(gè)class，描述結(jié)束狀態(tài)。
默認(rèn)添加開始狀態(tài)，要執(zhí)行動(dòng)畫的時(shí)候，添加上結(jié)束狀態(tài)。樣式就會切換成結(jié)束的樣式。
這是在瞬間完成的。要實(shí)現(xiàn)動(dòng)畫效果，需要元素樣式中添加transition屬性，描述動(dòng)畫的：生效范圍、持續(xù)時(shí)長、動(dòng)畫效果。

* {
  transition: all 0.8s ease-in-out;
  text-decoration: none;
  color: #333;
}

這為視圖中的每一個(gè)元素都添加了過渡動(dòng)畫。
不只是添加類名。即使是拖動(dòng)窗口大小，如果元素采用了相對定位，也會有一個(gè)過渡的動(dòng)畫。文章來源地址http://www.zghlxwxcb.cn/news/detail-851313.html

到了這里，關(guān)于圖片或視頻充當(dāng)網(wǎng)頁背景+過渡動(dòng)畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！