说明说明

注意事项注意事项

API地址调用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');
    }
}