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