使用 CSS 定位将图片放置在四个角

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

在网页的四个角嵌套图片可以产生非常酷炫的效果。您可以使用 CSS 轻松实现这种定位,而不会影响任何其他页面内容。如果您不想使用所有四个角,也可以选择使用其中的一些。以下是基本理论

#upper_left {
	position: absolute;
	top: 0;
	left: 0;
}
#upper_right {
	position: absolute;
	top: 0;
	right: 0%;
}
#lower_left {
	position: absolute;
	bottom: 0%;
	left: 0;
}
#lower_right {
	bottom: 0%;
	right: 0%;
	position: absolute;
}

allfourcorners.png

[在线示例]

[下载示例]