多波段灯是什么?用途以及原理?

html-css07

多波段灯是什么?用途以及原理?,第1张

产品用途:

搜索浅在指纹、足迹、血印、纤维等微量物证

搜索射击残留物、血液、精斑、人体组织液等物证

提高荧光试剂处理过的指掌纹照相效果

用于紫外、荧光、分色照相的配光

产品特点:

55W氙灯,灯泡寿命3000小时,色温5500K

强紫外光输出,功率小,重量轻,光纯度好,便于携带

技术参数:

输出功率:55W 灯泡寿命:3000小时 色温:5500K 供电:DC12V/AC220V

电 池:12V锂离子充电电池,可连续工作60-100分钟,可选配备用电池

滤 色 片:采用优质硬膜干涉滤色片,输出的光单色性好、纯度高

光 斑:光斑焦距大小可调,输出的光更加均匀,满足不同配光的需求

波 段:9波段和13波段(可根据需要订制任意波段)

9 波 段:UV 、CSS、415nm、450nm、530nm、555nm、570nm、610nm、白光

13 波 段:UV 、CSS、415nm、450nm、470nm、505nm、530nm、555nm、590nm、

610nm、650nm、40%衰减、和白光

材 质:采用优质轻型铝合金材料,散热性好,防震抗压性强,适于恶劣环境

附 件:荧光粉、眼镜、滤色片、鹳毛刷、磁性刷等

1、打开在线写前端代码的网站如jsrun或者jsfiddle。

目2、标是做一个如图所示的效果,不同大小的图片。

3、每个方框的html 如下,

<div>

<span>

<img src='图片地址'>

</img>

</span>

</div>

4、css如下,其中需要注意的是,不要设置最外层div的大小,只设置span的大小,让span的大小决定div的大小。

其中

display: table-cell

text-align: center

vertical-align: middle

这3行决定居中效果。

其中

img {

max-width: 100%

max-height: 100%

}

的目的是让图片可以缩放而比例不变。

div {

float:left

margin:5px

padding:5px

border:1px solid #000

}

span {

font-size: 0

width: 150px

height: 150px

display: table-cell

text-align: center

vertical-align: middle

}

img {

max-width: 100%

max-height: 100%

}

5、效果如下,很好的实现居中。

6、上面是div为float的情况

div如果是absolute或fixed也可以正常表现。

只有一个div的情况下,代码如下

<div>

<span>

<img src='图片地址'>

</img>

</span>

</div>

div {

margin:5px

padding:5px

border:1px solid #000

position: absolute

left:100px

top:100px

}

span {

font-size: 0

width: 150px

height: 150px

display: table-cell

text-align: center

vertical-align: middle

}

img {

max-width: 100%

max-height: 100%

}

7、这张图片仍然是居中的,没有收到父容器的影响。