CSS教你玩转背景图

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


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

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

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

size

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

background-position是用来控制位置

position

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

1080p

而小屏时是这样

小屏


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,811评论 0 2
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,082评论 0 2
  • 1、背景颜色-background-color 在CSS中,使用background-color属性来控制元素的背...
    故笙丶阅读 784评论 2 3
  • CSS3对background新加了3个属性,background-origin、background-clip、...
    彬_仔阅读 1,551评论 0 9