精华内容
下载资源
问答
  • 怎么描述一张图片
    千次阅读
    2021-04-20 10:09:47

    1:实现鼠标移入之后图片更改为content中配置的路径 

    // 给图片 增加class或id通过class或id给图片添加CSS样式
    <img alt="" class="look_flag" src="../assets/images/index/look.png"/>
    
    .look_flag{
        display:block;
        width: 30px;
        height: 20px;
        float: right;
        margin-bottom: 0px;    
    }
    
    /* 通过class标签或id设置hover事件:content:url('图片的相对路径') */
    .look_flag:hover {
        content: url('../images/index/look_hover.png') no-repeat;
    }

    2:鼠标未移入是灰色的,鼠标移入是彩色的

    <div class="img_outer">
        <img src="2.jpg">
    </div>
    
    
    .img_outer>img{
        width: 200px;
        height: 200px;
        /* cursor: pointer; 鼠标移入 显示手指状 */
        cursor: pointer;
        /* filter: grayscale(100%); 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0; */
        filter: grayscale(100%);
        transition:all 0.2s;
    }
    
    .img_outer>img:hover{
        filter: none;
    }

    transition主要包含四个属性值:

    • 执行变换的属性:transition-property
    • 变换延续的时间:transition-duration
    • 在延续时间段,变换的速率变化transition-timing-function
    • 变换延迟时间transition-delay

    Filter 函数  注:滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75) 

    Filter描述
    none默认值,没有效果。
    blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

    如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
    brightness(%)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
    contrast(%)调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
    drop-shadow(h-shadow v-shadow blur spread color)

    给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:

    <offset-x> <offset-y> (必须)

    这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
    如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).

    <blur-radius> (可选)

    这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).

    <spread-radius> (可选)

    这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 
    注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。

     

    <color> (可选)

    查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。

    grayscale(%)

    将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

    hue-rotate(deg)

    给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

    invert(%)

    反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

    opacity(%)

    转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

    saturate(%)

    转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。

    sepia(%)

    将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

    url()

    URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

    例如:

    filter: url(svg-url#element-id): url(svg-url#element-id)
    initial

    设置属性为默认值

    inherit从父元素继承该属性
    更多相关内容
  • 自动生成图片描述:NeuralTalk2 一、基本信息 NeuralTalk2是斯坦福计算机视觉人工智能实验室的一个项目,利用循环神经网络(RNN)和卷积神经网络(CNN)来描述图片内容,NeuralTalk2 比第一版训练速度更快(使用...

    自动生成图片描述:NeuralTalk2

    一、基本信息

    NeuralTalk2是斯坦福计算机视觉人工智能实验室的一个项目,利用循环神经网络(RNN)和卷积神经网络(CNN)来描述图片内容,NeuralTalk2 比第一版训练速度更快(使用了GPU),并且具有更好的性能表现。
    本篇博客注重该项目的源码实现部分,论文解读部分后续会上传。下面是该项目是一些资源连接

    官网
    http://cs.stanford.edu/people/karpathy/deepimagesent/
    论文
    Deep Visual-Semantic Alignments for Generating Image Descriptions
    Github源码
    https://github.com/karpathy/neuraltalk2

    二、源码实现

    1.环境及配置要求(建议)

    • Linux系统(我用的是Ubuntu 16.04-LTS)
    • GPU图形处理器(我的是GTX-980Ti,如果没有,也可以运行cpu版代码)
    • python(2或3都可以,我用的是3)
    • CUDA和cuDNN_v5.1(如果是其他版本的,可以看后文的cudnn多版本共存部分)
    • …(剩余环境依赖在后面需要用到的时候慢慢装)

    2.安装依赖和各种包

    由于测试代码部分由lua脚本语言写成,所以我们需要安装Torch,在Ubuntu下,利用如下指令完成Torch的安装

    $ curl -s https://raw.githubusercontent.com/torch/ezinstall/master/install-deps | bash
    $ git clone https://github.com/torch/distro.git ~/torch --recursive
    $ cd ~/torch; 
    $ ./install.sh      # and enter "yes" at the end to modify your bashrc
    $ source ~/.bashrc  #如果你用的是zsh,就输入source ~/.zshrc,ubuntu默认为bash

    想要了解有关Torch的跟多信息,可以点击http://torch.ch/查看相应安装文档。
    Torch安装好以后会自带LuaRocks,我们需要用它来安装一些必要的包:

    $ luarocks install nn
    $ luarocks install nngraph 
    $ luarocks install image 

    接着,因为我们要加载和保存json文件,所以我们还需要cjson库,安装方法如下

    $ git clone https://github.com/mpx/lua-cjson.git
    $ cd lua-cjson
    $ luarocks make

    其他安装方法可以查看官方安装文档:https://www.kyne.com.au/%7Emark/software/lua-cjson-manual.html

    由于NeuralTalk2默认是采用GPU实现的,所以必须确保你的系统上已经正确安装了对应GPU的NVIDIA驱动,以及CUDA开发者工具包和cuDNN(建议版本CUDA7.5或CUDA8、cuDNNv5.1,安装方法可以看这篇文章的CUDA安装部分http://blog.csdn.net/ksws0292756/article/details/79179286
    注意,如果你之前已经安装了NVIDIA和CUDA,但是你的cuDNN版本不是v5.1,而是更高版本时(我预装版本是v6.0),就需要再去下载cuDNNv5.1,下载地址是:https://developer.nvidia.com/rdp/cudnn-download#a-collapseTwo(下载需要登录nvidia帐号)
    下载好以后,有两种方法,一种是删掉原先的cuDNN版本,重新安装cuDNNv5.1版本,另一种是添加新的环境变量,使两种版本共存,操作如下:

    方法一:删除原来版本

    $ sudo rm -f /usr/local/cuda/lib64/libcudnn* #强制删除libcudnn相关文件
    $ sudo rm -f /usr/local/cuda/include/cudnn.h #/强制删除cudnn头文件
    #注意,上面的两处删除路径是cuda的默认路径,具体删除时根据你自己的路径来删除
    
    $ cd /Downloads/cuda #将下载的cuDNN解压,得到名为cuda的文件夹,进入
    #添加cudnn到cudn库
    $ sudo cp include/cudnn.h /usr/local/cuda/include/
    $ sudo cp lib64/libcudnn* /usr/local/cuda/lib64/
    #修改添加到cuda库的cudnn权限
    $ sudo chmod a+r /usr/local/cuda/include/cudnn.h 
    $ sudo chmod a+r /usr/local/cuda/lib64/libcudnn*

    方法二:与原来版本共存

    #分别在lib64和include文件夹下面建立一个空文件夹,假设取名cudnn_v5.1
    $ cd /usr/local/cuda/lib64
    $ sudo mkdir cudnn_v5.1
    $ cd /usr/local/cuda/include
    $ sudo mkdir cudnn_v5.1
    
    #然后进入到cudnn_v5.1解压出的cuda文件夹内,将相关库文件拷贝至刚才创建的文件夹
    #添加cudnn到cudn库
    $ sudo cp include/cudnn.h /usr/local/cuda/include/cudnn_v5.1
    $ sudo cp lib64/libcudnn* /usr/local/cuda/lib64/cudnn_v5.1
    #修改添加到cuda库的cudnn权限
    $ sudo chmod a+r /usr/local/cuda/include/cudnn.h 
    $ sudo chmod a+r /usr/local/cuda/lib64/libcudnn*

    接着,打开bashrc文件,添加环境变量

    $ gedit ~/.bashrc # 如果你用的是zsh,就改成~/.zshrc

    在文件中加上下面一行

    export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda-8.0/lib64/cudnn_v5.1

    这里写图片描述

    安装完驱动和CUDA工具包等以后,再安装下面的cutorch包和cunn包

    $ luarocks install cutorch
    $ luarocks install cunn

    接着,安装cudnn.torch,在安装cudnn.torch之前,先确认你的电脑已经进行了如下配置

    • 安装了v5.1版本的cuDNN
    • 安装了7.0以上版本的CUDA
    • 将放到了环境变量所包含的路径当中($LD_LIBRARY_PATH) ,具体方法参见安装cuDNN的教程

    然后,输入下面的指令建立Torch链接:

    $ git clone https://github.com/soumith/cudnn.torch.git
    $ cd cudnn.torch
    $ luarocks make cudnn-scm-1.rockspec

    为了能够训练你自己的模型,你还需要安装loadcaffe

    $ sudo apt-get install libprotobuf-dev protobuf-compiler
    $ CC=gcc-5 CXX=g++-5 luarocks install loadcaffe 
    #如果你的系统不是Ubuntu16.04,则只需要luarocks install loadcaffe即可

    由于需要使用hdf5文件来存储预处理数据,所以还需要安装torch-hdf5 和 h5py,
    安装torch-hdf5

    $ sudo apt-get install libhdf5-serial-dev hdf5-tools
    $ git clone https://github.com/deepmind/torch-hdf5
    $ cd torch-hdf5
    $ luarocks make hdf5-0-0.rockspec LIBHDF5_LIBDIR="/usr/lib/x86_64-linux-gnu/"

    安装h5py
    对于Anaconda/MiniConda,可以使用

    $ conda install h5py
    

    对于Canopy,可以使用

    $ enpkg h5py

    也可以使用pip安装

    $ pip install h5py

    以上就安装完了所有的依赖,如果在上面的安装步骤中都没有出错的话,基本上就可以将代码成功的跑起来了(作者吐槽:依赖确实很多,但是这也是没办法的事情)

    3.测试运行

    为了能快速看到代码运行的结果,我们这里就直接使用作者已经训练好的模型(如果自己训练,大概需要2~3天的时间),点击下面的链接下载:cs.stanford.edu/people/karpathy/neuraltalk2/checkpoint_v1.zip
    下载好以后,解压到neuraltalk2项目文件夹里面(也可以解压到别处,只是解压到这里比较方便),然后,运行下面的指令:

    $ th eval.lua -model /path/to/model -image_folder /path/to/image/directory -num_images 10 

    这里-model后面的路径代表模型路径(可以是相对路径,也可以是绝对路径),-image_folder后面的路径是你想要测试的图片的文件夹路径,-image_folder后面的数字代表图片的数量,如果想要测试所有图片,就输入-1

    具体用法如下:

    $ cd ~/Works/NeuralTalk2/neuraltalk2 #进入到neuraltalk2项目文件夹,具体路径看你自己的存放位置
    $ th eval.lua -model model_id1-501-1448236541.t7 -image_folder ~/Works/NeuralTalk2/pics -num_images 4
    $ python -m http.server #如果你使用的是python2,则用`python -m SimpleHTTPServer`指令启动服务器

    最后,在你的浏览器中访问localhost:8000就可以看到程序的运行结果啦,下面是我的运行结果:
    这里写图片描述

    如果你想训练自己的神经网络模型,可以参考github源码上面的介绍,在这里就不多说明了。

    展开全文
  • 该插件启用后会为文章内容中的每一张图片根据文章的标题来自动添加设置图片的ALT描述,利于站点的seo优化。 使用说明: 后台安装,上传使用,具体使用效果可以通过文章页的源代码查看 EMLOG插件路径:http://你的...
  • 下面小编就为大家分享一篇JavaScript通过mouseover()实现图片变大效果的示例,具有很好的参考价值,希望对大家有所帮助
  •  第3步: 通过数组进行图片url和对应文字描述的存储;  第4步:初始化:包括图片的初始化,显示图片数字以及对应文字的初始化等;  第5步:点击按钮切换图片,编写对应的函数,其实就是数组的简单应用。  接下来...
  • 介绍了asp.net显示图片到指定的Image控件中 具体实现,有需要的朋友可以参考一下
  • 特效描述:利用JS实现 多张图片合成 一张图片代码。利用JS实现多张图片合成一张图片代码代码结构1. HTML代码注:请在服务端运行才能看到效果 function hecheng(){draw(function(){document.getElementById('imgBox')...

    特效描述:利用JS实现 多张图片合成 一张图片代码。利用JS实现多张图片合成一张图片代码

    代码结构

    1. HTML代码

    注:请在服务端运行才能看到效果

    img1.png

    img2.png

    img3.png

    img4.png

    function hecheng(){

    draw(function(){

    document.getElementById('imgBox').innerHTML='

    合成图片成功!可以鼠标另存图片查看我是否是一张图片~~!

    '+base64%5B0%5D+'';

    })

    }

    var data=['img1.png','img2.png','img3.png','img4.png'],base64=[];

    function draw(fn){

    var c=document.createElement('canvas'),

    ctx=c.getContext('2d'),

    len=data.length;

    c.width=290;

    c.height=290;

    ctx.rect(0,0,c.width,c.height);

    ctx.fillStyle='#fff';

    ctx.fill();

    function drawing(n){

    if(n

    var img=new Image;

    //img.crossOrigin = 'Anonymous'; //解决跨域

    img.src=data[n];

    img.οnlοad=function(){

    ctx.drawImage(img,0,0,290,290);

    drawing(n+1);//递归

    }

    }else{

    //保存生成作品图片

    base64.push(c.toDataURL("image/jpeg",0.8));

    //alert(JSON.stringify(base64));

    fn();

    }

    }

    drawing(0);

    }

    展开全文
  • 怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原张三13419505758浙江省台州市椒江区中心大道183号德志和大厦7楼张三13419505758浙江省台州市椒江区中心大道183号德志和大厦7楼.content {width:...

    怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原

    张三

    13419505758

    浙江省台州市椒江区中心大道183号德志和大厦7楼

    kong.png

    张三

    13419505758

    浙江省台州市椒江区中心大道183号德志和大厦7楼

    kong.png

    .content {

    width: 100%;

    }

    .content .border {

    background-color: #ffffff;

    padding-left: 3%;

    padding-right: 3%;

    margin-top: 10px;

    }

    .content .border .content-first {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    height: 30px;

    line-height: 30px;

    padding-top: 10px;

    }

    .content .border .content-first .first-name {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    }

    .content .border .content-first .first-phone {

    -webkit-box-flex: 2;

    -webkit-flex: 2;

    -ms-flex: 2;

    flex: 2;

    text-align: left;

    }

    .content .border .content-second {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    padding-bottom: 10px;

    }

    .content .border .content-second .second-text {

    -webkit-box-flex: 3;

    -webkit-flex: 3;

    -ms-flex: 3;

    flex: 3;

    height: 40px;

    line-height: 20px;

    color: #a9a9a9;

    }

    .content .border .content-second .second-pic {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    text-align: right;

    }

    .content .border .content-second .second-pic .second-img {

    width: 25px;

    }

    效果类似这样

    点击那个白色图片就换成那张红的,没被点击的变成是白色的

    相关阅读:

    如何在widget发一条广播让service收到

    关于下面这个网站的动画特效,有点看不懂 他使用html的data来制作的 请问这个是纯CSS和javascript可以制作的吗?

    ubuntu 13.04怎么设定默认的鼠标加速度为0?

    goalng编译时找不到包

    见谅,是我没描述清楚问题,主线程访问网络并更新UI的问题

    通过标签来检索内容,该如何设计数据库。

    /tmp与/tmp/之间的区别?

    Android 中 getAngleChange 如何使用?

    用了Struts2的JSP页面里能不能由用户点击来改变Action设置的某个session的变量值?

    jcifs.smb.SmbException异常,相关信息很少,求解?

    安卓录音如何用代码实现录制手机内部的声音?非麦克风非通话

    如何改善CSS加载顺序达到友好的显示效果?

    如何批量提取网页中的特定字符串?

    fis 的 命令行里logo是怎么生成的?

    scrollLeft能用css3的transition做动画吗?

    如何和使用vm的后端合作

    两个TableView做同步选中行时,选中行高亮效果延迟的问题

    json_encode json_force_object问题

    EntityKey.EntityKeyValues主键值为null

    UIScreenEdgePanGestureRecognizer 不能检测到状态?

    展开全文
  • 之前用按键精灵写过一些游戏辅助,里面有个函数叫FindPic,上在屏幕范围查找给定的一张图片,返回查找到的坐标位置。  现在,Java来实现这个函数类似的功能。  算法描述:  屏幕截图,得到图A,(查找的目标...
  • 使用java将几张图片合成一张图片

    千次阅读 2020-04-23 10:54:38
    背景描述:最近在做app推送消息,在做管住人推送需要把有更新的关注人头像合成一张图片,展示示例如下: 花了一些时间来弄这个,之前没做过图片处理,所以记录一下,合成之后的样例如下: 下面是代码: /** * ...
  • element-ui限制一张图片上传

    千次阅读 2021-04-14 11:50:18
    需求描述:在做图片上传组件的时候 有时候需求回要求只能上传一张图片 bug:element-ui在上传完一张图片后上传按钮还会存在 虽然可以用自带的limt属性加以限制 但是上传按钮依然会存在 且存入数组的值依然会增加 ...
  • 图片相册,相册,图片展示 了了PHP个人相册程序(图片展示系统) v1.1,像一款图片特效管理系统,前台自动生成特效,后台可对每一张图片进行管理,可批量上传及删除图片,每一张你还可设置标题以及文字描述内容。...
  • 需求描述: 选择手机相册中的一张图片,并通过ImageView展示出来 参考博文: android打开手机相册获取真正的图片路径 效果展示: 示例代码: MainActivity package com.example.www.mutilmedia; import android....
  • Android 中使用svg图片

    2021-01-20 08:47:13
     使用xml 描述二维图形语言,矢量图,放大缩小无影响  为什么用svg,现在手机的短板是内存,不是cpu,svg通过cpu计算,png占用内存  Android上对svg进行阉割,使用Vector Drawable对svg支持,svg小 2. svg语法:   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 113,678
精华内容 45,471
关键字:

怎么描述一张图片