css实现自适应背景图及背景图透明度处理

2024-05-11 23:40:58

前言

大屏可视化在展示方式上之所炫酷是因为有很多科技感图形的衬托，这些图形可以来自图表组件，也可以是UI组件，具备科技感的UI组件实际上比常见的组件库中的组件多了一个样式属性（即backgroundImage），但是在做组件自适应的时候往往一张背景图是不能满足自适应的需求的，设置了backgroundSize之后，不同的分辨率下需要的背景图的宽高比也许不同，这样背景图呈现出来的效果可能会被拉伸或者挤压，显然这不符合我们的要求，如下图所示：

调研

1、拼接svg

最初调研了svg，发现和jpg、png实现出来的效果一样，尽管svg是矢量图形支持viewbox，也会出现拉伸的情况，之后尝试过将多个svg碎片拼接成一个支持自适应的svg（即将一张背景图，以九宫格的方式切成9份，其中定义好哪些碎片是可以重复的，这样拼接起来就支持自适应了），如下图所示：

于是乎写了一个svg拼接的工具，将上图中9张svg碎片拼接成一个自适应的svg，并支持下载。

这种方式虽然实现了但是切图过程和拼接逻辑比较繁琐复杂。

2、安卓切图

之后调研了安卓切图规范，这种方式是可行的。

CSS3 实现自适应背景图

结合安卓点九切图规范生成的切图，使用border-image属性设置即可。

{border-image:url(/i/border.png) 30 30 round;
}复制代码

背景图透明度处理

在样式中添加filter属性，实现下图效果，是不是很神奇，这样就不需要因为背景图透明问题让设计重新切图了。

{background: url(/assets/images/blueAlert1Info.3885cb44.svg) 0% 0% / cover;/* 新增filter属性 */filter: drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}复制代码

转载于:https://juejin.im/post/5be7a2a06fb9a049de6ce135

css实现自适应背景图及背景图透明度处理相关推荐

css编程设置网页背景,网页中cssbackground背景图和背景颜色的设置方法
CSS 背景这里指通过CSS对对象设置背景属性,如网页中通过CSS设置背景各种样式. Css background背景作用:设置纯色背景.背景background可以设置对象纯色的背景颜色,设置图为背 ...
html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...
005_HTML制作炫酷登录界面（CSS精灵图、背景图片局部显示）
效果: 说明: 输入框由三部分组成: 装局部图标的span 显示提示文字的span 接受用户输入的input 交互效果刚打开页面,所有输入框显示提示文字当input获得焦点,提示文字消失当inp ...
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层？
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
web——CSS精灵图（背景图、定位背景图片background-position属性）
web--CSS精灵图(背景图.定位背景图片background-position 属性) 一.background-position属性二.实例一.background-position属性例 ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
css——给多张图片设置一个背景图：上下固定尺寸+中间拉伸，里面放内容
UI图:头尾是特殊的边框.中间也有边框无限拉升,里面要放图片 html部分分为三层最外层防止背景图的上下部分,分别置顶置底 --中层放置背景图中部 ----内层*n 放置内容撑开最外层最外层和 ...
CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg);/* 背景图垂直.水平均居中 */ background-p ...
HTML+CSS 背景之雪碧图+渐变
一:雪碧图雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...

最新文章

热门文章