手机端页面制作之——背景图片因长度不够而出现堆叠

每日一更文章，看看我能坚持多久，这是第三天了
今天的文章主题是解决背景图片因为长度有限不能够充满整个页面，当设置

background-repeat: repeat-y;

或者

background-repeat: repeat-x;

的时候会遇到的问题，在这里主要用于手机端的页面，但是经过测试，电脑端也可以很好的用到，至于兼容性嘛，我不太清楚，评论区如果有大神，还请指点一二。
这个问题，还是那句话，对页面的要求不高的话，不会觉得他是个问题，但是你真正出现了，也确实是很头疼。解决这个问题的关键是它

background-size: cover;

再加上下面这个就更完美了

background-position: 50%  50%;

这个代码适用于在背景图片有明显的边界的情况。因为背景图片在重复使用的时候，若有明显的边界，的确很影响视觉效果，若每次只显示中间的部分，则并不会出现因背景的重叠而显示出明显的分解感。
当然一张纯色的背景是绝对不会出现这样的问题的，今天就分享到这里趴~

手机端页面制作之——背景图片因长度不够而出现堆叠相关推荐

从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
java手机界面太小_手机端页面在项目中遇到的一些问题及解决办法
原标题:手机端页面在项目中遇到的一些问题及解决办法来源:键盘上的眼泪 segmentfault.com/a/1190000015178877 1.解决页面使用overflow: scroll在iOS ...
Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 W3C标准盒子模型和IE盒子模型的区别 Bootstrap4--新闻管理手机端页面菜 ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
手机端页面的自适应设计的开发思路
一直在找有关手机端页面自适应写得比较好的文章,今天终于找到一篇,个人觉得写得很详细.如果想要拿到需求就知道要适用什么方法,除了要熟练规则.多参考一些优秀网站,还要动手实践几次. 以下为转发的正文: 互 ...
html5写手机端页面
众位大神,有没有使用html5,以Bootstrap框架为核心来写手机端页面的资料?希望得到大家帮助!!! 欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢 ...
手机端页面测试神器--Browsersync
需求点有时候我们在做手机端页面的时候,电脑端制作完成需要手机端看效果.这个时候可以使用我们的神器-Browsersync 安装前提条件是安装node环境. 然后运行(全局安装) npm insta ...
html+手机自适应源码,手机端页面自适应解决方案—rem布局（进阶版，附源码示例）...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
[html] 如何禁止手机端页面缩放？
[html] 如何禁止手机端页面缩放? <meta name="viewport" content="user-scalable=no"> 个人简介 ...

手机端页面制作之——背景图片因长度不够而出现堆叠

手机端页面制作之——背景图片因长度不够而出现堆叠相关推荐

最新文章

热门文章