精华内容
下载资源
问答
  • css图形

    2017-02-23 20:56:00
    在网页中,我们经常看到各种图形效果。一般在这种情况下我们都会通过图片来实现,但是每一次都是使用图片...当我们为每一条边框定义不同颜色,并且设置足够大的宽度,同时把width和height设置0.就可以得到一个对角线...

    在网页中,我们经常看到各种图形效果。一般在这种情况下我们都会通过图片来实现,但是每一次都是使用图片的话,将会导致数据传输量过大,并且一张图片会引发一次HTTP请求,这两个方面都会影响页面加载速度。如果利用css样式来实现图片效果,就能极大地减少网页加载时间。

    一、三角形:

    当我们为每一条边框定义不同颜色,并且设置足够大的宽度,同时把width和height设置0.就可以得到一个对角线相连的正方形。此时,如果我们把上,右,左的边框设为transparent,就能得到一个方向指向上的三角形。如果要实现带边框的三角形,就要用两个三角形,一个外层,一个内层,两个三角形之间只相差一个像素。。

    eg:

    #triangle{
    position:relative;
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-color:transparent transparent black transparent;
    }
    
    #triangle div{
    position:absolute;
    top:-29px;;
    left:-29px;
    width:0;
    height:0;
    border-width:29px;
    border-style:solid;
    border-color:transparent transparent #BBFFEE transparent;
    }
    

      说明:在定位布局的时候,我们会发现为什么top和left是-29px而不是top为1px,left为0呢?因为子元素的绝对定位是根据父元素的“内容边界”进行定位的,由于盒子width和height都是0,因此content是在盒子中心。所以才会是使用上面的布局。如果要实现带有三角形的对话框,则要把外层三角形和内层三角形作为一个整体相对于对话框来进行定位。

    二、圆:

    1.css实现圆角

    要制作出圆形,首先需要知道一个属性:border-raidus,这个是属性可以设置圆角半径。我们先来看看它的用法:

    (1)border-radius设置一个值:表示四个角的圆角半径都是10px

    (2)设置两个值:如border-radius:10px 20px;表示左上角和右下角的圆角半径是10px,右上角和左下角的圆角半径是20px(即两条对角线)

    (3)设置三个值:如border-radius:10px 20px 30px;表示左上角是10px,右上角和左下角的圆角半径都是20px,右下角圆角半径是30px。

    (4)设置四个值:按照顺时针方向赋值。

    2.css实现半圆:

    假如我们要制作上半圆,只要把height设为宽度width的一半,并且左上角和右上角的圆角半径定义与元素的高度(宽度)一致,而右下角和左下角的圆角半径设定为0即可。

    3.css实现圆:

    和制作半圆的语法相似,我们只需要把元素的高度和宽度定义为相同值就可以了。

    4.css实现椭圆:

    语法;border-radius:x/y;

    说明:x表示圆角的水平半径,y表示圆角的垂直半径。当两者相等则图形为圆,否则为椭圆。

    转载于:https://www.cnblogs.com/runhua/p/6435413.html

    展开全文
  • TensorFlow图像编码处理

    2018-10-31 23:49:40
    图像是二维的,即长和宽,一张图像由这二维平面上无数个点组成,每个点用RGB三通道来表示这个点的颜色。这许多个二维平面上的点就构成我们看到的各种图片啦! 然而,图像在存储时并不是记录这些矩阵中的数...

    第一次发blog,记录学习过程,虽有点low,贵在坚持呀!

     

    一般处理的图像是RGB色彩模式的图像,可以将其看成一个三维矩阵,矩阵中的每一个数代表了图像上不同位置不同

    颜色的亮度。

    如何理解呐?图像是二维的,即长和宽,一张图像由这二维平面上无数个点组成,每个点用RGB三通道来表示这个点的颜色。这许多个二维平面上的点就构成我们看到的各种图片啦!

    然而,图像在存储时并不是记录这些矩阵中的数字,而是记录经过压缩编码之后的结果。图像还原成三维矩阵形式,需要解码过程。Tensorflow提供了对jpeg和png格式图像的解码/编码函数。以下是示例。

    import matplotlib.pyplot as plt
    
    import tensorflow as tf
    
    image_raw_data = tf.gfile.FastGFile("D:/add/41A (2).jpg", "rb").read()
    
    with tf.Session() as sess:
        img_data = tf.image.decode_jpeg(image_raw_data)
        print (img_data.eval())
        plt.imshow(img_data.eval())
        plt.show()
    
        encoded_image = tf.image.encode_jpeg(img_data)
        with tf.gfile.GFile("D:/add1/123.jpg","wb") as f:
            f.write(encoded_image.eval())    

     

    我遇到的问题:UnicodeEncodeError: 'utf-8' codec can't encode character '\udcbe' in position 1856: surrogates not allowed

    参考了一下别人的blog。反映最多的是路径名称问题,路径中包含中文什么的,可我的也没有呀!后来再add1文件夹后面随便加个123.jpg。嘿,竟然搞定了。自己果然很菜啊!

    效果展示:

    上面是打印的三维矩阵的一部分,和打印的图片。

     

    上面是按照jpeg格式编码存入D盘add1文件夹下的图像。

    详细参考:《TensorFlow实战Google深度学习框架》第二版7.2.1节。

    不当之处,欢迎指正!

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 鼠标移入图标显示颜色

    千次阅读 2018-11-05 15:41:37
    今天有些空闲,了解了解现在前端的技术,无意中看到一个鼠标移入图片显示颜色这个功能,通常的时候我们会用雪碧,改变不同的位置显示不同的图片,或者两张图片替换,但是今天意外发现一整更简便的方法,一张图片就...

    今天有些空闲,了解了解现在前端的技术,无意中看到一个鼠标移入图片显示颜色这个功能,通常的时候我们会用雪碧图,改变不同的位置显示不同的图片,或者两张图片替换,但是今天意外发现一整更简便的方法,一张图片就可以搞定,那就是cssfilter实现。好了不多说直接看代码吧。

    html代码:

    <div class="img_outer">
        <img src="2.jpg">
    </div>

    css代码: 

    .img_outer>img{
        width: 200px;
        height: 200px;
        cursor: pointer;
        filter: grayscale(100%);
        transition:all 0.2s;
    }
    .img_outer>img:hover{
        filter: none;
    }

    下面就是运行后的效果我们来看看吧。

    第一张是鼠标未移入的效果,第二张是鼠标移入的效果。 

    展开全文
  • 热图像均值matlab代码PCA-图像压缩 图像压缩 要开始使用 PCA 进行图像压缩,可以将图像表示为像素颜色值矩阵,其中 X 和 Y 的值是图像中像素的坐标,f(x,y) ...来重建图像,我们可以看到使用不同
  • UE4-(光照)光照贴图

    千次阅读 2020-04-28 10:57:37
    由引擎生成的光照贴图纹理要比一般光照贴图稍微复杂点,引擎会为这张贴图创建两个不同的版本,光照贴图本质是就是一张采集了颜色和阴影的图像,然后将自身与模型纹理相乘,然后这张纹理与模型表面混合。就算光照不...

    光照贴图是引擎内部自动生成的一种纹理,可以应用到模型表面。

    在世界场景设置中:

    找到光照贴图分段,就可以看到光照贴图。由引擎生成的光照贴图纹理要比一般光照贴图稍微复杂点,引擎会为这张贴图创建两个不同的版本,光照贴图本质是就是一张采集了颜色和阴影的图像,然后将自身与模型纹理相乘,然后这张纹理与模型表面混合。就算光照不存在,也会看到有光照阴影的效果,这个时候看到的只是图片模拟光照的效果。

    创建光照贴图:

    为了让引擎能够自动创建光照贴图,所有需要通过引擎生成光照贴图的模型都要进行适当设置,模型需要提供引擎使用的光照贴图UV坐标。

    1.选中场景中的模型,打开资源编辑器在UV通道选项查看模型的UV,可以更改通道。

    错误通道:

    2.如果没有第二个uv通道,可以通过引擎创建,第二个uv通道专门用于光照,注意:在导入模型时的导入选项中设置默认自动生成第二个uv通道,如果没有勾选默认生成,需要进行以下设置。

    在设置中找到LOD0-》构建设置-》生成光照贴图uv。

    也可以设置光照贴图的最小分辨率

    源光照贴图索引 默认为0,不需要改动

    目标光照贴图索引为1

    源光照贴图与目标光照贴图索引分别对应的是UV下拉菜单的选项

    设置完成后点击,应用改动

    效果:在UV面板选择uv通道1

    这个就是Lightmass用来生成光照贴图的uv

    3.设置光照贴图的分辨率:

    默认为4,意思是说4*4像素,分辨率非常低

    分辨率应该根据模型大小以及项目具体情况进行调整。可以为512或者1024。

    设置完成后就可以烘焙光照。

    4.光照贴图uv也可以在3dmax中更改导入到引擎中。先将模型资源导出,然后导入到常用的3D建模软件中进行UV的设置。当创建这些UV布局时要注意UV坐标直接不能出现任何重叠,不能出现翻转,不能越出UV0到UV1的范围必须保证在UV方格内。

    展开全文
  • 一张图像是由一个包含若干个像素点的矩形框组成的,试着把一张图在“画图”软件中放大会有更直观的感受,下面是lena图放大后的效果。 可以看到图像是由很多个小格子组成的,每个小格子都只有一种颜色,这是构成...
  • 图像的基本单元是一个像素,就像一个巨幅电子广告屏上远处看是衣服图像,走近你会看到一个一个的方格,这个方格的颜色是一种,从远处看,觉察不到这个方格的存在。 一个像素需要3块表示,分别代表R,G,B,如果8为...
  • cv中读取一张图片是按照BGR的三通道信息显示图片的,这与我们正常看到的图片不同,可以先转化为RGB顺序。 import cv2 import matplotlib.pyplot as plt img = cv2.imread("BIT.jpg") b,g,r = cv2.split(img) img_new...
  • 隐藏代码到图片背后前言原理应用思考 前言 很多时候在新闻上看到黑客将恶意代码隐藏到图片...因为屏幕显示技术的落后,像素点不同但相近的rgb的值,在电脑上显示是一样的颜色。我们可以将每个像素的最后一位使用一个
  • 色彩模式 授课时间 2017.3.28 课时两课时 1电脑屏幕上所有的颜色都是由红色绿色和蓝色三种色光按照不同的比例混合而成屏 幕上的任何一个颜色都可以由一组 RGB 值纪录和表达如果在某一张图像上移动鼠标可 以看到 ...
  • 举个例子:将一张图片放到PS中尽可能的放大,那么我们可以看到一个个的小格子,其中每个小格子就是一个像素点,每个像素点有且仅有一个颜色。 像素由四种不同的向量组成,即我们熟悉的RGBA(red,green,blue,alpha...
  • UV动画其实就是动态改变UV的坐标,让模型在一张不同颜色的贴图之间滑动,形成模型上贴图一直在动的感觉,如果你有一张河流的贴图,做出来的效果就是一个流动的河,这个效果网上都有可自行百度,今天说一下模型从透明...
  • 像素: 图片的属性,我们可以看到公交上面滚动播放字体的屏幕,你细看的话其实是一颗颗LED的灯组成的,一个像素就是一个LED灯泡,一张图片其实就是很多个不同颜色的点组成的,这个店就是像素 分辨率: 设备屏幕的...
  • 按住ALT键,将钢笔放置在新添加的节点上,可以看到钢笔工具变成了转换点工具,拖拽节点,将之改变为平滑点;按下CTRL,钢笔工具又变成了直接选择工具,将底边上新增节点向上移动,右边上新增节点向左移动;再将右下...
  • 突然就有了一个想法,如果能够根据不同的物件分离颜色的通道后再用神经网络去识别的话,想必会更加精准的。 那就涉及到色道分离啦。Opencv里有个函数能够做到将一张彩色图片的三通道分再保存到图像中。 越接近正色...
  • kaleidocope ... 因为本人是ios开发,所以很多东西,都是做的xcode的对比,无论撤销,还是选择...那么文件代码的变化怎么看呢,颜色很明显哦,以一张图表示: 至于文件将修改移动,那么下放的两个按钮,可以直接移动代码
  • 本软件是专业化立体相机模拟软件,将对分层的每个图层以及整体图像,模拟从不同角度拍照,生成不同角度的多张照片,如果中有变画,也能包含其中,一起生成,互不影响。然后在三立立体实拍合成软件(3D之星IV)中...
  • pr day01

    2021-03-16 16:02:50
    ps中放大一张图片可以看到有许多格子组成一张图片,其中每个格子则是一个像素 像素不一样的事物,所表达出来的视觉感官是不一样的,比如ps中图片的拉伸 2.不管是图片还是视频中的颜色,是由红绿蓝三种通道组成的...
  • Mapping_Earthquakes-源码

    2021-03-20 15:19:44
    能够将不同类型的信息相互叠加在一张地图上以查看信息是如何重要的,这一点很重要。 退税 映射1和映射3对于查看与颜色有关的信息不是理想的。调整要显示的信息的颜色以使其与背景中的地图的颜色对齐将很有帮助。 ...
  • 我们来看这么一张图,在球上的我们可以看到不同的位置会显示出不同颜色,蓝色,黄色,五角星的红色,在地板上也是,不同的位置展示了不同的纹路,他们的基本区别是什么呢? 它们其实共用一个着色模型,一个点的颜色是由其...
  • 图层的蒙版的几种理解方式 1一张有各种形状的镂空图板蒙在被遮罩的图片上面 2在图片上洒上不同形状的沙子 3看到被捅破的纸糊的窗户外的风景 ;图层的蒙版的几种颜色的作用 1黑色部分图像被挡住 2白色部分图像显现出来...
  • 一张图片采用不同的阀值进行二值化后得到的图像差距很大,如下所示: 原: 以下分别是阀值为50、 70、150时二值化的结果: 可以看到只有合适的阀值才能很好的二值化图像,如何自动的确定阀值呢? 大津二值化...
  • 在计算机中,我们所看到的图像是使用RGB(red,green,bule)三种颜色来显示的,通过不同的R,G,B数值来显示不同的像素点,最终一个个像素点组合成我们所要看到的图像,如下所示: 我们把这些像素值提取出来,放入...
  • 通过以上可以看到一是简单的使用,二、三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是二为选中非选中两张图片,三的选中非选中是一张图片只是做了颜色变化。 二、 需求 ...
  • 例如,从一张椅子的单一图像中,人类毫不费力地识别出不同的视觉概念,如它的颜色、材料等。 风格、用途等。这种不同的视觉概念可能与自然语言中定义每个视觉概念的识别任务的不同问题有关 (例如,这把椅子是什么...
  • 大量漂亮的ICO图标集

    热门讨论 2009-10-10 21:45:07
    每个图标都含有多张相同显示内容的图片,每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片,每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性:它含有透明区域,在透明区域内...
  • 分析目前比较流行的几种3D立体眼镜

    千次阅读 2011-04-25 16:58:00
    工作原理是采用光在相对应颜色和不同颜色下的通过性,来达到让两只眼睛只看到3D图像2张图中的一张。这种眼镜历史悠久,早期3D电影多用这种模式。特点是廉价、实惠、几乎不存在维护费用,适用性好,一些爱好者的3D...
  • 举个例子:将一张图片放到PS中尽可能的放大,那么我们可以看到一个个的小格子,其中每个小格子就是一个像素点,每个像素点有且仅有一个颜色。 像素由四种不同的向量组成,即我们熟悉的RGBA(red,green,blue,alpha...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

一张图看到不同颜色