这是我参与更文挑战的第8天,活动详情查看 更文挑战
页面设计的时候,设计师经常会给页面加上漂亮的背景图。代码实现的时候,我们既希望能够实现屏幕自适应,又希望不会变形,而且背景图还需要不随滚动条的滚动而滚动。那这要做么做呢?让我们一起来看看吧!(代码在最后可直接复制使用!)
background知识点
background图解分析
处理重复问题
background-repeat:no-repeat;
处理前
宽高不足的地方,被图片重复铺满了
处理后
处理完后,宽高不足的地方会出现留白
处理图片位置问题
垂直水平
background-position:center center;
上左
background-position:top left;
下右
background-position:bottom right;
处理图片拉伸问题(以居中为例)
横向拉伸
background-size:100% auto;
纵向拉伸
background-size:auto 100%;
等比例拉伸(会截取图片)
背景图片放大到适合元素容器的尺寸,图片比例不变,但某些部分被切割无法显示完整背景图像
background-size: cover;
图片拉伸(图片会扭曲)
按容器比例撑满,会看到完整的背景图片,但是图片会变形
background-size: 100% 100%;
设置全屏图片(代码)
方案一:图片比例不变,但是有可能显示不全
.bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;/*min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,缩放屏幕宽度时,图片不要缩放*/
z-index:-10;/*因为背景图片应该放在最下方,所以设置一个层级*/
zoom: 1;
background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ;/*背景图路径 背景图不平铺 背景图垂直、水平均居中 */
background-size:cover; /* ---把背景图片放大到适合元素容器的尺寸,图片比例不变,但某些部分被切割无法显示完整背景图像 */
background-attachment:fixed; /* 当内容高度大于图片高度时,背景图像的位置相对于 可视窗口 固定,此条属性必须设置 */
}
方案二:图片撑满容器,但是图片可能变形
.bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;/*min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,缩放屏幕宽度时,图片不要缩放*/
z-index:-10;/*因为背景图片应该放在最下方,所以设置一个层级*/
zoom: 1;
background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ;/*背景图路径 背景图不平铺 背景图垂直、水平均居中 */
background-size:100% 100%; /* ---按容器比例撑满,图片变形;*/
background-attachment:fixed; /* 当内容高度大于图片高度时,背景图像的位置相对于 可视窗口 固定,此条属性必须设置 */
}
小可爱看完就点个赞再走吧!🤞🤞🤞