下面的代碼沒(méi)有考慮響應(yīng)式的效果，如果考慮的話還需要一些代碼進(jìn)行處理。
【注】當(dāng)時(shí)寫的時(shí)候僅考慮了 webkit 內(nèi)核的瀏覽器，如果是 IE 或者其他瀏覽器，請(qǐng)?jiān)黾宇~外的 CSS 樣式進(jìn)行控制。
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
overflow-y: scroll;
}
/* 僅適用于Webkit瀏覽器（Chrome和Safari等） */
::-webkit-scrollbar {
width: 0.3em; /* 設(shè)置滾動(dòng)條寬度 */
}
::-webkit-scrollbar-track {
background-color: transparent; /* 設(shè)置滾動(dòng)條軌道背景色 */
}
::-webkit-scrollbar-thumb {
background-color: rgb(74, 144, 250); /* 設(shè)置滾動(dòng)條滑塊顏色 */
border-radius: 4px; /* 設(shè)置滾動(dòng)條滑塊圓角 */
}
.image {
height: 90vh; /* 沒(méi)有使用 100vh，主要是讓用戶直觀的看到下面還有一張圖 */
background-size: cover;
background-repeat: no-repeat;
}
/* 設(shè)置第一個(gè)圖片地址 */
.image:nth-child(1) {
background-image: url('test.jpg');
}
/* 設(shè)置第二個(gè)圖片地址 */
.image:nth-child(2) {
background-image: url('test.jpg');
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.baidu.com">
<div class="image"></div>
</a>
<a href="http://www.qq.com">
<div class="image"></div>
</a>
</div>
</body>
</html>
顯示效果如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-663318.html
個(gè)人博客：Roc’s Blog文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-663318.html
到了這里，關(guān)于CSS 小技能（一）：HTML 兩個(gè)圖片豎著平鋪、設(shè)置圖片點(diǎn)擊、設(shè)置滾動(dòng)條顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
