0
点赞
收藏
分享

微信扫一扫

3D AI女友「EVE」,你想拥有吗

幺幺零 2024-11-01 阅读 27
css

背景

最近正好在写一个个人博客网站“小石潭记”,需要一张有水,有鱼的图片。正好玩原神遇到了类似场景,于是截图保存,添加到网站里面。以下是效果图:
效果图

css

写个class,加到整个网页的body上

.bodyBg {
    background-color: aliceblue; 
    width: 100vw;
    height: 100vh;
    background-image: url('/bg-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

说明

background-color:设置一个颜色,由于图片加载慢很多,在图片展示之前先显示一个颜色;
background-size:设置图片裁剪的模式;
background-repeat: 由于我希望整张图片铺满,所以设置no-repeat;
background-attachment: 设置图片fixed固定住,不然y轴可以滚动时,多余的内容会不显示图片;

问题

不知道为什么添加图片后会有宽度溢出,导致x轴出现滚动条,
如果不加图片就没问题(不知道有没有大佬知道原因,恳请告知!)。
所以加上另外一个属性,x轴有溢出就隐藏。

    overflow-x: hidden;
举报

相关推荐

0 条评论