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

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

背景图片取消重复

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 center;

水平方向居中垂直方向向上

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

水平方向向右垂直方向向下

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

背景图片等比例拉伸

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%;

css 背景图片自适应属性整理相关推荐

css 背景图片自适应元素大小
本人软件工程大三学生,近期在公司实习,初级前端工作者. 由于正在做手机端界面,自适应的布局成了最主要的工作,在最近对背景图片自动伸缩频繁使用,对自动伸缩的方法有一点心得体会. 一.一种比较土的方法,& ...
css 背景图片自适应全屏
自适应屏幕大小,撑满全屏(图片宽高比会随屏幕宽高比变化) 不随着滚动条滚动 .bg{background: url("~@/assets/images/主背景.png");posi ...
CSS背景图片自适应缩放contain/cover
background-size: contain; background-repeat: no-repeat; background-position-x: center; background-po ...
web开发入门，css背景图片自适应屏幕宽度
现如今,我们经常可以看到很多互联网员工都在抱怨,不是说收入低了,就是说工作时间太长.所以我们会见到有不少优秀的互联网员工,只要有机会,要么去一些学校当老师,要么当公务员之类比较稳定的岗位,当然这些能够 ...
css背景图片自适应
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
CSS 背景图片自适应
background: url(JS/company.jpg) no-repeat; width: 100%; height: 40%; background-size: 100%100%; http ...
html背景自动适应,css背景图片如何自适应？
css可以使用background-size属性设置背景图片自适应,为背景图片设置background-size:cover;样式即可使背景图片自适应. css可以使用background-size属 ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法的相关资料,希望小伙伴们看 ...

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

背景图片取消重复

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

背景图片居中显示

背景图片等比例拉伸

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

css 背景图片自适应属性整理相关推荐

最新文章

热门文章