资讯专栏INFORMATION COLUMN

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

xiguadada / 2372人阅读

摘要:在页面构建时,刚入门的前端小狮子们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小,是非常直观的一种控制方式,如上图,我

在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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91394.html

相关文章

  • CSS教你玩转背景background-position1

    摘要:在页面构建时,刚入门的前端小狮子们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小,是非常直观的一种控制方式,如上图,我 在HTML页面构建时,刚入门的前端小狮子?️ 们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又...

    tyheist 评论0 收藏0
  • CSS教你玩转背景background-position1

    摘要:在页面构建时,刚入门的前端小狮子们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小,是非常直观的一种控制方式,如上图,我 在HTML页面构建时,刚入门的前端小狮子?️ 们经常被背景图的位置,尺寸所迷惑,怎样才能更好的处理背景图,让背景图达到你想要的效果呢,那么,退后,朕又...

    jay_tian 评论0 收藏0
  • 视频来啦 | 手把手教你玩转数人云容器管理面板Crane

    摘要:数人云容器管理面板已经开源一个月多啦,经历了新版本的发布,完善了许多功能和体验。今天小数给小伙伴们带来的是数人云总架构师为大家录制的使用视频。欢迎扫码下方二维码来交流群进行技术交流 数人云容器管理面板Crane已经开源一个月多啦,经历了新版本v1.0.5的发布,完善了许多功能和体验。今天小数给小伙伴们带来的是数人云总架构师为大家录制的Crane使用视频。从安装到使用,step by s...

    brianway 评论0 收藏0
  • 7天教你玩转云服务器

    摘要:教学课程如何玩转云服务器云服务器是一种简单高效安全可靠处理能力可弹性伸缩的计算服务。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。云服务器租用产品送产权吗不送产权。教学课程:如何玩转云服务器云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器 。云服务器帮助您快速构建更稳定、安全...

    Labradors 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<