码迷,mamicode.com
首页 > Web开发 > 详细

CSS教你玩转背景background-position(1)

时间:2020-01-19 19:13:39      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:oar   tag   over   amp   教你   设置   round   vmw   大小   

在HTML页面构建时,刚入门的前端小狮子?? 们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又开始装逼了~

首先决定背景图的有如下属性:

background-image:url(images/recovery/Tips_bg.jpg);

background-size:length|percentage|cover|contain;

技术图片

size属性主要控制背景图片的大小,是非常直观的一种控制方式,如上图,我们既可以直接设置背景图的大小,比如100px 100px,等来控制大小,还可以设置对于容器的百分比来控制背景图片的大小,还有两种特殊的模式:cover&contain;

background-position是用来控制位置

技术图片

如果你想让一个banner图1080p时是这样

技术图片

而小屏时是这样

技术图片

怎么办?好说:直接设background-posiiton:center top 就哦了,他会让背景图从最中间铺开,再也不用担心错位的问题了,想要什么样式的,什么模式的背景图,都可以组合试一下,保证玩转~2333

CSS教你玩转背景background-position(1)

标签:oar   tag   over   amp   教你   设置   round   vmw   大小   

原文地址:https://www.cnblogs.com/jlfw/p/12215169.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!