【css】背景图片自适应属性整理

本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

背景图片取消重复
background-image: url(image.jpg);
background-repeat:no-repeat;

background-image: url(image.jpg);
background-repeat:no-repeat;

修改前

修改后

背景图片固定（不会随着内容滚动而改变位置）

background-image: url(image.jpg);
background-attachment:fixed;

背景图片居中显示

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center;

 

背景图片等比例拉伸

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: auto 100%;
/* background-size: 100% auto; */

 

或根据高度进行拉伸

还可以使用 cover 自动等比例拉伸图片

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: cover;

 

背景图片拉伸（会扭曲图片）

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

 

 

————————————————
版权声明：本文为CSDN博主「guoqing2016」的原创文章，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/guoqing2016/article/details/93641636