CSS的功用不僅限于網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面布局以及樣式美化，還可以在圖像上添加一些鏈接和視頻。

img {
display: block;
width: 50%;
margin: 0 auto;
}
a:hover img {
opacity: 0.5;
}
a:after {
content: "點(diǎn)擊以查看視頻";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 1rem;
border-radius: 1rem;
opacity: 0;
transition: all .5s ease;
}
a:hover:after {
opacity: 1;
}

上述代碼用于添加一個(gè)鏈接到圖片上。你可以在CSS中使用偽類`:after`為鏈接添加一個(gè)文字內(nèi)容，這樣用戶點(diǎn)擊鏈接就能看到視頻了。

以上是基本的圖片鏈接和視頻鏈接的寫法，這些代碼都是可以自由調(diào)整的，以便于實(shí)現(xiàn)更多自定義的樣式。比如效果可以是鼠標(biāo)懸浮在圖片上時(shí)出現(xiàn)一個(gè)半透明的遮罩，并且加上一個(gè)文字來(lái)提示用戶可以通過(guò)點(diǎn)擊打開視頻鏈接。無(wú)論你是在學(xué)習(xí)CSS還是在制作網(wǎng)頁(yè)，這些代碼都是非常有幫助的。