css background多层覆盖,CSS3 background-attachment: fixed 使用实例 - 图片滚动覆盖效果

CSS语言：CSSSCSS确定a {display: block;cursor: pointer;width: 100%;margin: 0 auto;height: 100vh;margin-bottom: 20px;background-position: center center;background-size: cover;background-attachment: fixed;}.s

汪湜

517人浏览 · 2021-08-03 18:09:33

汪湜 · 2021-08-03 18:09:33 发布

CSS

语言：

CSSSCSS

确定

a {

display: block;

cursor: pointer;

width: 100%;

margin: 0 auto;

height: 100vh;

margin-bottom: 20px;

background-position: center center;

background-size: cover;

background-attachment: fixed;

}

.spain {

background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Alhambra_evening_panorama_Mirador_San_Nicolas_sRGB-1.jpg/1280px-Alhambra_evening_panorama_Mirador_San_Nicolas_sRGB-1.jpg);

background-color: #fd7400;

}

.new-zealand {

background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/AucklandPano_MC.jpg/1280px-AucklandPano_MC.jpg);

background-color: #ffe11a;

}

.austria {

background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/AD2008Aug24_Ellmau_panorama.jpg/1280px-AD2008Aug24_Ellmau_panorama.jpg);

background-color: #bedb39;

}

.tanzania {

background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mikumi_National_Park_June_2011.jpg/1280px-Mikumi_National_Park_June_2011.jpg);

background-color: #1f8a70;

}

.pittsburgh {

background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Pittsburgh_dawn_city_pano.jpg/1280px-Pittsburgh_dawn_city_pano.jpg);

background-color: #004358;

}