API地址调用
1. 横屏图片
https://rba.kanostar.top/landscape
2. 竖屏图片
https://rba.kanostar.top/portrait
3. 方形图片
https://rba.kanostar.top/square
4. 自适应图片
https://rba.kanostar.top/adapt
调用示例
HTML使用
<img src="https://rba.kanostar.top/adapt" alt="随机图片">
CSS背景使用
.background {
background-image: url('https://rba.kanostar.top/adapt');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
推荐使用
/* 默认使用竖图 */
.background {
background-image: url('https://rba.kanostar.top/portrait');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* 横屏时使用横图 */
@media (min-aspect-ratio: 1/1) {
body::before {
background-image: url('https://rba.kanostar.top/landscape');
}
}