img图片处理
关注
分享
扫一扫
文章平均质量分 52
草巾冒小子
分享[前端技术主页] http://www.lzindex.com/
展开
-
团队协作新趋势：语雀——助力更多：个人、企业、博客、协作、托管、画布设计、资源托管（立体化趋势）
好多协同开发软件，加速工作效率。针对个人、企业、博客、协作、托管、画布设计、资源托管（立体化趋势）等等原创 2021-12-09 19:15:00 · 1520 阅读 · 0 评论 -
资源：代码舞动动画 提供gif图片（含程序、源码、下载地址）
3行代码 为你的网站博客添加萌萌哒可爱二次元女动漫玩偶人物（看板娘）抖音上爆红的美女动态代码图如何实现？原创 2021-06-13 08:00:47 · 632 阅读 · 0 评论 -
资源：gif动画截取、制作软件
资源：gif动画截取、制作软件软件地址：资源：gif动画截取、制作软件原创 2021-06-06 15:19:49 · 156 阅读 · 0 评论 -
资源：卡通人物制作 - 在线设计
站点资源：在线设计演示原创 2021-12-09 19:30:00 · 332 阅读 · 0 评论 -
＜img src=“图片引用失败“ onerror=“自动替换默认图片“＞ - 代码篇
私人：码云Gitee账号【帐密信息】原创 2021-05-24 21:52:39 · 983 阅读 · 0 评论 -
jpg , png 图片转SVG格式（资源篇）
jpg , png 图片转SVG格式（资源篇）在线工具：在线转换工具使用说明：打开网站，打开文件上传，设置尺寸，直接转换，下载即可。原创 2021-02-07 12:09:07 · 1112 阅读 · 0 评论 -
在线颜色拾取器 - 资源篇
在线颜色拾取器 - 资源篇点击访问资源： 在线颜色拾取器截图示下：原创 2021-01-22 21:47:55 · 558 阅读 · 0 评论 -
免费图片外链服务
阿里巴巴图片外链服务 稳定不掉线 免费使用：卓希免费图床原创 2020-12-31 23:24:55 · 546 阅读 · 0 评论 -
js获取图片真实尺寸 - 代码篇
js获取图片真实尺寸 - 代码篇代码案例：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>js获取图片真实尺寸</ti原创 2020-07-02 12:20:36 · 2050 阅读 · 0 评论 -
ps批量操作图片尺寸（一键执行） - 教程篇
场景：634张图片，如何批量改尺寸？快捷键操作：AltW然后Alt+F9视频演示：原创 2020-07-02 12:15:32 · 1748 阅读 · 0 评论 -
img图片（高效压缩）免费提供 · 在线压缩 - 工具篇
在线压缩工具：工具地址：压缩工具注意事项：压缩比：png > jpg <== 注意拖拽式压缩、批量压缩；原创 2020-06-03 10:52:26 · 6084 阅读 · 0 评论 -
前端代码：html、css（图文混排）文字环绕 - 案例篇
密码双向加密原创 2020-05-28 00:34:17 · 2721 阅读 · 0 评论 -
（图片抠图片）mask-img 属性（透视抠图）【含效果图、代码】 - 案例篇
图片抠图片 mask-img 属性文章主要代码提示（css属性）：mask-imagemask-modemask-repeatmask-positionmask-clipmask-originmask-sizemask-typemask-composite原创 2020-04-29 01:30:55 · 2211 阅读 · 0 评论 -
swiper图片轮播（左中右） （含源码）- 案例篇
swiper图片轮播（左中右） （含源码） - 案例篇效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" co...原创 2020-04-25 00:49:33 · 1854 阅读 · 0 评论 -
psd文件超大？教你如何压！ - 技巧篇
ps文件内存太大，打开太卡顿，切图都费劲！很多你不知道的技术！解决办法：高效压缩！有时候，几百兆的文件，能直接给你压缩到100M以内（源文件300M）。参考技术分享：PSD文件太大？高效压缩插件！以上就是关于“ ps文件内存太大？很多你不知道的内容！ - 压缩篇 ” 的全部内容。...原创 2020-04-21 10:06:15 · 5192 阅读 · 0 评论 -
css使图片变成黑白效果 - 代码篇
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;lonk/原创 2020-04-14 23:49:31 · 953 阅读 · 1 评论 -
vue动态监听窗口高度 - 全背景banner
参考地址：https://hacpai.com/article/1534819192805方案一：在 data 中去 定义 一个记录宽度是 属性data: { return { screenWidth: document.body.clientWidth // 设置默认值 }}在 vue mounted 的时候 去挂载一下 windo...原创 2019-10-28 16:20:18 · 1881 阅读 · 0 评论 -
css背景图background - 多背景定义
css背景图background - 多背景定义以上就是关于“ css背景图background - 多背景定义” 的全部内容。原创 2019-10-24 14:37:39 · 498 阅读 · 0 评论 -
PS如何生成svg代码格式的path路径 - PS技巧篇
PS如何生成svg代码格式的path路径 - PS技巧篇原文标题：PS中的svg工具是怎么使用的点击查看：百度教程以上就是关于“ # PS如何生成svg代码格式的path路径 - PS技巧篇 ”的全部内容。...原创 2019-10-23 16:35:59 · 4839 阅读 · 0 评论 -
svg动画 - 在线编辑器
SVG前言：资源：svg动画 - 在线编辑器最基本的一个静态SVG（不含动画）SVG矢量动画机制应用举例：http://www.sohu.com/a/242325373_470009原创 2019-10-23 16:33:55 · 7157 阅读 · 0 评论 -
PS切片工具（切图bug有阴影） - 解决篇
PS切片工具（切图bug有阴影） - 解决篇有阴影 （切片工具）使用 “切片工具”（如下图），切图有问题（问题描述 · 如下图2）:原因分析：产生阴影的原因：应该是文字图层影响了整体的截图效果，导致产生了阴影。无阴影（解决办法：）使用Shift+F8切图操作（不会产生阴影），如下图3所示。以上就是关于“ PS切片工具（切图bug有阴影） - ...原创 2019-10-21 11:23:28 · 1157 阅读 · 0 评论 -
纯CSS将图片转换成黑白
纯css设置img图片的灰色程度CSS代码如下：.partners-list li a i { -webkit-filter: grayscale(100%) brightness(1) contrast(.5); -moz-filter: grayscale(100%) brightness(1) contrast(.5); -ms-filter: grays...原创 2018-08-11 15:46:45 · 1593 阅读 · 0 评论 -
浏览器拦截机制，导致图片无法显示
浏览器拦截导致图片无法显示？情况分类案例1：360浏览器拦截以ads（广告） 为类名、文件名的图片或div等，结果不予显示。 【截图略】 案例2：谷歌浏览器拦截以DDOS（DDOS攻击）为文件名的图片，结果不予显示。 【截图如下】 解决办法：修改类名 修改文件名 以上就是关于” 浏览器拦截导致图片无法显示 ” 的全部内容。...原创 2018-08-11 12:27:06 · 5924 阅读 · 0 评论 -
纯css实现给图片加标签
纯css实现给图片加标签 原理：通过border、before、after、content、position定位，等等属性实现给图片添加标签样式。效果截图如下：代码实例：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8&a原创 2018-07-05 16:54:33 · 6926 阅读 · 0 评论 -
360浏览器自定义切核功能
360浏览器内核的选择：作为前端开发的浏览器兼容性处理，一直是一个程序员的不可规避的烦恼。 今天，就讲一下：360浏览器的自定义切核功能案例截图如下(兼容模式下)：详情说明： 360安全浏览器现有两种内核模式，即“极速模式”和“兼容模式”。极速模式 “极速模式”是以Blink（Webkit）为内核的浏览模式，Blink内核具有更高的网页浏览速...原创 2018-07-24 14:11:21 · 1082 阅读 · 0 评论 -
图片跟随鼠标移动并放大js特效
js实现图片放大，并跟随鼠标移动 很多网站有类似于淘宝放大镜的效果，只不过这里说的是 “ 不仅能直接放大，而且会跟随鼠标移动 ” ！ 类似于“ DEDECMS ”官网的案例中心的效果 ！本案例代码，参考如下：JS代码:&amp;amp;lt;script&amp;amp;gt; //展示 function showBigPic(filepath) { //将文件路...原创 2018-07-10 10:20:34 · 4571 阅读 · 0 评论 -
PS怎么压缩图片大小而像素不变
多图网站响应慢，图片加载延迟卡顿？ 通过PS压缩图片大小 ,而像素不变！ 其中一个主要的原因：网站的图片，数量多而且文件又太大了！ 有的图片占用字节能达到1M，甚至2M以上。本文就总结一下：通过PS软件，对图片进行有效压缩，进而达到网站的优化，缩短完成加载的时间。 我们以上面的JPG图片为例(PNG图片同样操作)，详细操作步骤：通过PS软件，打开图片；按...原创 2018-06-23 16:27:05 · 43580 阅读 · 0 评论 -
filter滤镜实现img图片的CSS蒙版效果、模糊效果
filter滤镜实现img图片的CSS蒙版效果、模糊效果 项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。 这里将会用到：filter这一属性。 文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。下面我们就来总结一下，这层模糊的蒙版效果的实现方法。首先看一下效果图。1. 效果图...原创 2018-06-23 16:28:34 · 4471 阅读 · 0 评论 -
svg与png/jpg快速转换
快速转换方法：将.svg 格式的图片，下载保存到本地；本地双击该图片，任意浏览器打开查看；对准图片，单击鼠标右键，选择“ 图片另存为 ” 然后选择图片另存格式为：png，或者 jpg；...原创 2018-05-30 15:46:30 · 15086 阅读 · 2 评论 -
svg标签的CSS3动画特效 - 经典特效
svg标签的CSS3动画特效 - 经典特效效果图截图：（类似于：水波荡漾） css代码如下：@charset "UTF-8";svg:not(:root) { overflow: hidden;}svg { width: 100%}/*svg g path,svg path { fill: #B4B4B4;}*/.svg-box{heig...原创 2018-08-31 14:02:54 · 1833 阅读 · 0 评论 -
svg标签的CSS3动画特效 - 经典特效2
svg标签的CSS3动画特效 - 图片上下滚动，会减速效果图截图：（类似于：上下往复 - 拉锯式运动） css代码如下：&amp;lt;style type=&quot;text/css&quot;&amp;gt;img { vertical-align: middle;border: 0;}p{margin: 0 0 10px;}.landingProductBg { widt...原创 2018-08-31 14:12:53 · 741 阅读 · 0 评论 -
CSS3动画 - 图片开关灯阴影动画
1. 效果图2. 代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3动画-图片开关灯阴影效果</title><style type="text/css"> ul,li{list-sty原创 2018-10-12 10:21:32 · 868 阅读 · 0 评论 -
PS切图 - （快捷键）操作方法
PS快捷切图 - 动作动作快捷键：选中你需要切图的图层；Shift + F8 就会直接切图（以图层的边缘为准）；然后，保存就好。@2x (原尺寸)@1xF8 生成两套文件Shift + F8 生成一套文件 （默认@2x） 是否以画布为准？...原创 2019-09-30 11:51:15 · 2983 阅读 · 0 评论 -
.png图片 阴影效果（fliter:drop-shadow属性）案例
png图片 阴影效果（fliter:drop-shadow属性）案例效果截图 · 示下：重要代码如下：<img src="qiye.png" class="ss"/>.ss:hover{ fliter:drop-shadow(0 0 5px #cccccc); -webkit-filter:drop-shadow(0 0 5px #cccccc);}附...原创 2019-09-19 14:08:10 · 2033 阅读 · 0 评论 -
vue 监听页面滚动事件：触发animate.min.css动画特效
vue 监听滚轮滚动事件原创 2019-08-16 16:23:03 · 5784 阅读 · 0 评论 -
Swiper4.5在vue项目中的使用方法
用swiper，所以要先在框架内npm install --save swiper安装它。安装完成之后，你会在路径演示代码如下：<template><div id="htmlWrap" style="background:none;"> <!--header--> <div class="bg545C64" style="backgro...原创 2019-08-16 16:17:04 · 23232 阅读 · 0 评论 -
css3图像边框：border-image - 代码篇
效果图：演示代码 · 如下：<!DOCTYPE html><html> <head> <style> div{ border:15px solid transparent; width:300px; padding:10px 20px; } #round{ -moz-borde...原创 2019-05-31 17:30:18 · 1530 阅读 · 0 评论 -
PS如何修改gif动图 播放速度 - 本地方法篇
PS如何修改gif动图，本地操作，立马出效果。比如你的视频是.mov格式的视频，原创 2019-05-14 17:38:13 · 7248 阅读 · 0 评论 -
有多少种 “图片格式”？
我们知道，图片格式有很多种，比如：JPG、JPEG、PNG、GIF、BMP、SVG等等哪一种格式的占内存最小，有时候也是网站优化需要考虑的。因为这直接关系到网站加载性能的快慢，以及用户体验的满意度。当然，凡事并不一定都是绝对了。通常情况下，占用内存从小到大，依次为：JPG = JPEG &amp;gt; GIF &amp;gt; PNG &amp;gt; BMP &amp;gt; SVG以上就是关于“ 图片格式...原创 2019-01-31 17:08:29 · 1082 阅读 · 0 评论 -
图片格式转换 - .webp 转格式为 .png / .jpg
很多时候，网页上素材图片格式出现了.webp格式的，PS无法正常打开查看或使用，所以需要转换一下其他格式（如.png / .jpg 等等）。例如：layui官网的logo 【如下图所示】这就尴尬了，即使Ctrl+S保存了，结果也是 “ 失败-已被禁止 ” 。随便推荐一款，直接转换webp文件为png/jpg等其他图片格式。附： 在线转换器以上就是关于“ 图片格式转换 - ....原创 2018-10-27 12:05:11 · 5906 阅读 · 0 评论