【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面

这是我们最终想要达到的效果，并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度！

开始准备物料

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

第二步：输出文件（一共是9个png文件：lt、mt、rt、lm、mm、rm、lb、mb、rb.png），需要注意小细节，我的每张图片都做了透明度，只为让卡片有一丢丢的透明效果

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

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

// 酷炫卡片背景************************************************
.sg-card {// 公共变量定义----------------------------------------$card-bg: "~@/assets/softwareIndustryBigBrain/common/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; //背景色（不需要,被mm.png替代）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}mm.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, $l_w $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}), calc(100% - #{$l_w} - #{$r_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;
}

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

最小宽高样式

宽度600px高度450px

宽度900px高度400px

怎么样满足你大数据展示各种需求了吧？一种淡淡的透明效果，更有视觉感、通透性！

【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面相关推荐

【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？
如果你要有透明度效果的背景图请移步https://blog.csdn.net/qq_37860634/article/details/119591991 这是我们最终想要达到的效果,并且支持任意宽高缩 ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
背景图片的位置及大小，background-size属性讲解
今天讲解一下简单的背景图片大小.位置,因为前段时间遇到手机上下留白太多,背景图片被拉伸的问题主要是对background-size属性值的各个演示使用的图片是这张 400*640大小老规矩,直接 ...
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML怎么做成多彩背景,纯html+div+css模拟酷炫彩色渲染背景
纯html+div+css模拟酷炫彩色渲染背景 www.html.com.cn 出品 html> 纯div+css模拟酷炫彩色渲染背景 /* 自写js */ body{ /*padding:0; ...
ueditor编辑器抓取页面背景图片background-image或background
ueditor.all.js文件里找到catchremoteimage,修改如下几部分代码(可以跟未修改之前对比一下): UE.plugins['catchremoteimage'] = functi ...
用js监控分辨率调整背景图片宽度_如何使用CSS Paint API动态创建与分辨率无关的可变背景
现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节.通过优化它们,你可以更好地利用它们的性能.如果你碰巧使用几何图形作为背景图像,有一个替代方案:你可以使用CSS Paint API以编程 ...
酷炫命令行背景图操作步骤
不知道大家有没有见过酷炫的命令行背景图片,很炫酷.例如: 是不是很酷,还能装个x,下面就带大家来操作一下: 首先打开,PyCharm,双击'shift',出现界面: , 输入:set backgrou ...
识别图片并可视化_数据可视化3大发展方向
数据可视化这一概念不过几年前才产生,但讲故事的技巧却早就已经生根发芽了.运用人物.事件.事件顺序.地点.时间段.感情和数字等要素,讲述故事总是让人类着迷. 如今,数据可视化可以图像化地叙述事件,及其起 ...

【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面

怎么样满足你大数据展示各种需求了吧？一种淡淡的透明效果，更有视觉感、通透性！

【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面相关推荐

最新文章

热门文章