开始准备物料

第一步：切片，建议用九宫格的形式，切割有考究，主要是最大限度、最小尺寸囊括多个边界转角处的样式(亮蓝色是参考线，白色文字是描述区域规则，红色文字是宽高、分割输出的png图片文件名，正中的宫格就用背景色纯色)

第二步：输出文件（一共是8个png文件：lt、mt、rt、lm、rm、lb、mb、rb.png），需要注意小细节，我的每张图片都做了线性渐变，只为让边角和背景色更加融合（不要出现戛然而止的断层、不衔接、low逼效果：不懂什么是low逼效果看最后的那张图~~~）

第三步：定义样式（如果嫌弃我的代码太多，可以无脑照搬直接拷贝代码，只要严格按照上图的切片命名规则，适当修改下变量$l_w、$r_w、$t_h、$b_h的像素值就可以搞定了）

<div class="sg-card"></div>

// 酷炫卡片背景************************************************
.sg-card {// 公共变量定义----------------------------------------$card-bg: "~@/assets/common/sg-card/"; //异形背景图片路径前缀$card-bg-color:#020f2e; //中间背景纯色$l_w: 46px; //左侧边界宽度$r_w: 88px; //右侧边界宽度$t_h: 72px; //顶部边界高度$b_h: 46px; //底部边界高度// ----------------------------------------display: inline-block;//这个根据实际情况来（非必选）min-width: calc(#{$l_w} + #{$r_w});//最小宽度等于左右两端边界宽度之和min-height: calc(#{$t_h} + #{$b_h});//最小高度等于上下两端边界高度之和background-color: $card-bg-color;//背景色background-repeat: no-repeat; //一定要用不平铺的属性// 核心代码----------------------------------------background-image: // 顶部左、中、右url(#{$card-bg}lt.png), url(#{$card-bg}mt.png), url(#{$card-bg}rt.png),// 中间层左、 右url(#{$card-bg}lm.png), url(#{$card-bg}rm.png),// 底部左、中、右url(#{$card-bg}lb.png), url(#{$card-bg}mb.png), url(#{$card-bg}rb.png);background-position: // 顶部左、中、右left top, $l_w top, right top,// 中间层左、 右left $t_h, right $t_h,// 底部左、中、右left bottom, $l_w bottom, right bottom;background-size: // 顶部左、中、右$l_w $t_h, calc(100% - #{$l_w} - #{$r_w}) $t_h, $r_w $t_h,// 中间层左、 右$l_w calc(100% - #{$t_h} - #{$b_h}), $r_w calc(100% - #{$t_h} - #{$b_h}),// 底部左、中、右$l_w $b_h, calc(100% - #{$l_w} - #{$r_w}) $b_h, $r_w $b_h;// ----------------------------------------
}

最后我们来看看实现的效果吧：

最小宽高样式

宽度400px高度300px

宽度900px高度400px

怎么样满足你大数据展示各种需求了吧？自由适配各种宽高

这就是low逼效果图

【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？相关推荐

【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
这是我们最终想要达到的效果,并且支持任意宽高缩放不变形.注意哟这次不一样的是有透明度! 开始准备物料第一步:切片,建议用九宫格的形式,切割有考究,主要是最大限度.最小尺寸囊括多个边界转角处的样式(亮 ...
酷炫页面产品图片展示
平时看惯了一些基本的图片展示效果,今天给大家分享一个比较酷炫页面产品图片展示,感觉用在黑科技展示的效果会更好一点. 老规矩,先上图: 当我们拖动图片上那个红色的BAR时,作为分界线,两边的图片也会在各 ...
html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效点击跳转到演示地址点击进入资源下载地址
Android之——史上最简单最酷炫的3D图片浏览效果的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量 ...
andorid最新的不规则色彩背景图片自适应屏幕宽高,背景不变形
先在这里吐槽一下万恶的客户改需求... 再说一句...网上大部份资料都是坑爹的.因为不是针对你需求来写的....别照抄..你只能从多种答案中总结出自己的代码.自己的方法所谓不规则背景图片是指色彩不同 ...
超酷炫粒子背景插件—particles.js
GitHub-教程-下载 1)先到github中下载particles.js-master.zip,下载下来的文件中有一个demo案例. 2)将demo文件中的particles.min.js.sty ...
手机banner图片自适应手机宽高定位
<div class="image-header"><img src="../b1.jpg" alt="" />&l ...
教程：简单几步制作出酷炫网页版简历
为你的求职加个分:手把手教你制作酷炫的简历网页又到了一年之中金秋招聘旺季.在求职时,一份精致的网页版简历能为自己加分不少,帮你全面地展示自己,在相似度较高的简历模板中脱颖而出,给面试官留下深刻的 ...
（转载）酷炫桌面背景图片，实用命令图片
这是在优麒麟某个帖子上看到的. http://www.ubuntukylin.com/ukylin/forum.php?mod=viewthread&tid=28194 这是链接原地址,上面有 ...

【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？

开始准备物料

怎么样满足你大数据展示各种需求了吧？自由适配各种宽高

【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？相关推荐

最新文章

热门文章