拉伸

制作页面时，有时需要在表格内插入背景图,我们可以使用CSS进行控制，代码： style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;" 其中，./images/counter_bg.jpg为显示图片路径。 如果现在需要实现背景图随表格拉伸而不重复的拉伸填充，如何实现？ 制作方法： 建立表格，并在<table>中插入CSS的一种滤镜，代码： style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')" 不过此方法仅支持Ie，并且在ie6中还存在一个问题，就是背景上方的超链接等元素会失效，暂时未找到好的解决方案。如果谁找到了，请留言。 另外，如果需要其他更复杂的效果，建议用层来实现了，利用层的z-index属性，来实现，几乎是无所不能啊。例子： 使用层实现的flash背景 <div style="position:relative"> <EMBED style="position:absolute;z-index:0" src="http://www.68design.net/art

css中能个添加背景图片background:url(“”);但是这里只能指定no-repeat或者repeat-x,repeat-y这些平铺的方式. 如果我们想要图片是拉伸的,我们该怎么办呢?方法有两个: style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')";但是这个滤镜只对IE有效. 我们可以选择在底下一个层放一个img(这个img是可以拉伸的),然后上面一层放我们的内容. 1: <div><img src="图片地址" width="100%"></div> 2: <div style="position:absolute; top:0px;left:0px; width:100%"> 3: 我们的内容 4: </div> 本人有限,暂时只能想到这样的方法了. 来源： https://www.cnblogs.com/huangjacky/archive/2011/08/12/2135761.html

前言： 最近又使用到了。9图片，因为之前没有记录还是走了不少弯路的。所以好记性不如烂笔头。在此记录一下。希望对不明白的同学有所帮助。简单介绍下点9图片的作用，比如微信里的聊天气泡，因为我们输入的内容是随机的，所以聊天气泡背景的形状是不固定的，可大可小，可长可短。这个时候就可以利用1张点9图片来解决这个变化的问题。 一、选择一张普通的图片右键，创建我们的.9图片 这里我们以ic_launcher为例，右键选择Create 9-Patch file… 之后就是选择存储我们的点9图片， 记住一定要放在drawable文件夹里 。 二、编辑点9图片。 2.1、编辑拉伸区域 图片上边和左边表示的是图片拉伸区域。可以直接按住鼠标左键，想画笔一样。画上你想拉伸的区域。画上以后，当然也能去调整（当然也能取消，按住shift后相当于橡皮檫功能，按住鼠标左键去画你擦掉的地方即可） 我这里拉伸了小机器人的头部和眼睛下面的一小块。 这里需要额外注意的点： 这个.9图片要设置在background里才会生效。 imageView里的src里设置是无效的无效的无效的 效果如下（可以看到，除了拉伸区域外变形外，其他区域是保持原来的比例的。无论你的空间多大）： 2.2、编辑内容填充区域 图片的下边和右边确定了内容填充的区域。那什么是内容填充？我们先把下边和右边先画上如图（这里我勾选了Show content

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 开发应用程序的时候，如果一个应用的界面太丑，给用户的第一感觉就是这个产品很垃圾，即使功能很强悍。大公司的码农当然就不用担心了，因为有很多艺 术天赋的美工美眉来处理这个方面，但是如果是小公司的话，或者说你想自己开发应用的话，没有一个吸引人的界面是不会得到用户关注的。自己开发的应用如果看 着很喜爱，那当然再好不过了 　　废话有些多，了解.9.png图片已经一段时间了，索性将其记载下来，以防以后忘记。虽然网上有很多，但是很乱，看着心烦，而且不符合自己的需求，所以还是自己动手丰衣足食。 　　.9.png图片其实就是png格式图片，不过它比普通的png图片外围多了1px（像素）的边框，另外就是使用这种格式的图片可以实现背景自 适应大小且不失真的效果。比如某些控件横竖屏切换后控件的样子就变形了，或者某些图片作为控件背景也变形，这会让人很郁闷。幸好.9.png图片可以提供 这些需要的功能 　　 使用步骤 1、 制作属于你自己的png图片，一定要是png图片。可以自己PS制作，也可以解压其他应用的apk文件，用里面的图片资源，Android系统也有图片资源可以使用（） 2、 在D:\android\android-sdk-windows\tools目录下找到 draw9patch.bat 文件，然后将其打开

一、将Image拖拽至CanvasPanel下调整大小，并选中Image，细节面板的Appearance下的Brush选择一张图片 二、参数说明： 1.Tiling中参数： No Tile：不平铺，拉伸变形 Horizontal：横向平铺，纵向拉伸会变形 Verticl：纵向平铺，横线拉伸会变形 Both：横向纵向都平铺。拉伸不会变形 2.Draw As：绘图方式 None：不绘制，图片为空 Box：九宫格，设置参数后可以保证图片拉伸时四个角区域不变形 Border：在九宫格基础上抠掉中间部分 3.Color and Opacity ：设置颜色和 透明度，注意：该颜色会与图片本身颜色叠加 如果同时设置Tint和Color and Opacity颜色，最终呈现效果是两种颜色与图片颜色的叠加，并且保留图片纹理。 三、图片On Mouse Button Down 事件 Image可以绑定鼠标点击事件 来源： CSDN 作者： 懒猫睡大觉 链接： https://blog.csdn.net/lei_7103/article/details/103497107

9-patch是一种缩放不失真或变形的图片格式，常用于聊天框的实现。 as中提供了制做9-patch的功能 如上图:create 9-Patch file… 左侧为原图片，右侧为拉伸效果 黑线规则： （直接画，删除按住shift） 1.左边加上黑线区域表示整个图片在上下/纵向拉伸时候保证只有黑色区域的像素参与拉伸，其他地方都是原样，具体效果可以参考右侧的预览； 2.上边加上黑线区域表示整个图片在左右/横向拉伸时候保证只有黑色区域的像素参与拉伸其他地方都是原样，具体效果可以参考右侧的预览； 3,右侧加上黑线区域表示在上下拉伸时候整个图片中显示的文字等内容只在黑色像素区域内显示，其他地方不显示图片内的内容； 4,底部加上黑线区域表示在左右拉伸时候整个图片中显示的文字等内容只在黑色像素区域内显示，其他地方不显示图片内的内容； 红线规则 （貌似只对左侧和上侧有效果）（按住ctrl画） 1.红线的的区域表示控制，去掉不需要的、多余的边框部分的内容。 黑线第条边必须都要有，否则可能会报错 Error:Some file crunching failed, see logs for details Error:Execution failed for task ‘:app:mergeDebugResources’. Error: java.util.concurrent

Android.9图片讲解（一） 2013-12-24 我来说两句 来源：小源的专栏 收藏 我要投稿 什么是.9图片 至于什么是.9图片这里就简单提一下，即图片后缀名前有.9的图片，如pic.9.png、pic1.9.jgp，诸如此类的图片就称为.9图片。 .9图片的作用 ①.9图片的作用是在图片拉伸的时候特定的区域不会发生图片失真，至于哪些部分不会失真那么得看你的图片是如何绘制的。 ②当一张图片作为背景时可以指定前景内容的显示区域。如图： 其中灰色是背景、绿色是前景。那么前景放在背景的具体位置是可以通过.9图片进行规定的。 ①利用android开发环境中提供的工具draw9patch。 draw9patch如图 ： 在“原始图像显示绘制区域”（这个名称自己取的）其实显示的是一张原始图片，并且在原始图片的四周添加了一个像素，通俗点说就是图片比原始图片扩大了一 圈，多出来的那一圈是透明像素。我们需要绘制的地方真是在那一圈透明像素上进行绘制。在绘制之前先讲讲那一圈透明像素的含义。如图： 这个图会如何拉伸、如何显示前景呢？最简单的方法是直接看“拉伸预览区”，当然更快捷是方法是你能直接看出这个区域。 红色框区域：表示纵向拉伸的区域，也就是说，当图片需要纵向拉伸的时候它会只指定拉伸红色区域，其他区域在纵向是不会拉伸的。 绿色框区域：表示横向拉伸的区域，也就是说

一.图片拉伸 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode 以上两个函数都用于图片的拉伸，两个函数都需要传入一个UIEdgeInsets结构体，结构体如下： typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; 两个函数都表明对以四个参数绘制成的矩形框区域进行拉伸，函数二还有一个UIImageResizingMode参数，它也是一个结构体如下： typedef NS_ENUM(NSInteger, UIImageResizingMode) { UIImageResizingModeTile, UIImageResizingModeStretch, };

Image组件有很多构造函数，这里只说两个。 Image.asset 本地图片 1.在根目录新建文件夹 /images 2.在 images 文件夹下建立两个文件夹 /images/2.0x /images/3.0x 3.在 /image 下放最小的图片，依次放较大的图片在 2.0x，3.0x 4.在pubspec.yaml声明添加的图片文件 flutter: assets: - images/123.ipeg - images/2.0x/123.jpeg - images/3.0x/123.jpeg 5.在代码中就可以使用了 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "imageWidget", home: Scaffold( body: Container( child: Image.asset("images/123.jpeg") ), ), ); } } Image.network 远程图片 import 'package:flutter

1. 直接设置CSS样式达到目的 .bg{ background-image: url(../images/1.jpg);//此为图片地址 background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; } 在以上代码中，background-size: cover；是对背景图进行等比例拉伸，仍然存在图片显示不完全的问题。 background-size: 100% 100%；是对背景图的宽拉伸至屏幕宽度，高拉伸为屏幕高度，即非等比例拉伸。 该方法虽然较为简单，但存在问题：对图片进行拉伸成都较大时会使图片失真。 2. 利用 css @media @media only screen and ( min-width : 1024px ) { // 当分辨率 width >= 1024px 时使用 1 .jpg 作为背景图片 .bg { background : url(../images/1.jpg) no-repeat ; } } @media only screen and ( min-width : 400px ) and ( max-width : 1024px ) { // 当分辨率 400px < width < 1024px 时使用 2