PS常用工具常见的图片格式和特点 IE 浏览器常见兼容问题 CSS Hack

PS常用工具常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS Hack

PS常用工具

移动工具移动工具主要负责图层、选区、等的移动、复制操作。快捷键：v 抓手工具快捷键：h空格 + 鼠标左键拖动，空格键可临时转换为抓手工具。放大镜工具放大镜工具可以放大或缩小图像。放大：点击放大工具，点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。缩小：点击缩小工具，点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。文字工具快捷键：t文字工具是用来输入文本的。吸管工具快捷键：i 标尺工具标尺工具可以用来测量图像的高度或者宽度。属性栏： x 和 y：绘制的起点坐标。 W：标尺投射到 x 轴上的宽度。 H：标尺投射到 y 轴上的高度。（正负仅代表方向，x 轴方向向右，y 轴方向向下）。颜色叠加颜色叠加可以将原有颜色改变为指定颜色，并通过调整其混合模式和不透明度来控偶之颜色叠加的效果，也能够更加完善图片的色彩度，使图片变为指定的某一种颜色。切片工具根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为 web 所用格式的时候能将所切的各个部分分别保存成一张图片，完全区分开来。保存时可选择图片格式以及切片类型。制作表情包将表情素材调入PS中；再找一张脸部细节丰富的人物照片，同样调入PS里；利用套索工具，将人物中表情部分扣取下来，拖入表情素材内。Ctrl+T调整一下表情的尺寸，让它和素材大小协调；Ctrl+Shift+U首先对表情部分去色，然后按下Ctrl+M调出曲线工具，将对比度压低，整个表情打亮。这里特别说一下，挑选素材图时一定要注意去找那些面部打光均匀的照片，避免存在明暗过渡明显的“阴阳脸”，否则会给后期图片处理带来很多麻烦；双击表情图层，然后按住Alt键依次拖动混合颜色带右侧两个高光滑杆，你会发现表情就完美地嵌入到素材中了；

常见的图片格式和特点

IE 浏览器常见兼容问题

兼容问题 ie中图片边框问题图片放在a标签中

<style>img {/* border: none; *//* border: 0; */border: 10px solid red;}</style></head><body><a href="#"><img src="./img/03.jpg" alt=""></a></body>

ie8以下浏览器中背景复合属性的写法问题

<style>* {padding: 0;margin: 0;}.box {width: 100%;height: 300px;/* 背景复合属性问题：解决方法就是不要省略空格 *//* background:red url(./img/03.jpg)no-repeat center; */background:red url(./img/03.jpg) no-repeat center;}</style></head><body><div class="box"></div></body>

其他ie低版本兼容问题在IE6及更早浏览器中定义小高度的容器

<style>.box {height: 1px;background-color: red;overflow: hidden;font-size: 0;line-height: 0;}</style></head><body><div class="box"></div></body>

IE6及更早浏览器浮动时产生双倍边距的BUG 解决方案：针对ie6设置该标签的display属性为inline即可

<style>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;background-color: red;float: left;margin-left: 10px;/* _ 只有ie6生效 */_display: inline;}</style>

IE7及更早浏览器下子标签相对定位时父标签overflow属性的auto|hidden失效的问题解决方案：给父标签也设置相对定位position:relative;

<style>* {padding: 0;margin: 0;}.wrap {width: 300px;height: 300px;background-color: red;overflow: hidden;/* 解决方法：给父标签加相对定位 */position: relative;}.box {width: 200px;height: 200px;background-color: blue;position: relative;left: 150px;}</style></head><body><div class="wrap"><div class="box"></div></div></body>

块转行内块 ie7 不在一行显示解决方案：

<style>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;background-color: red;display: inline-block;/* * ie7以下生效 */*display: inline;*zoom: 1;}</style></head><body><div class="box"></div><div class="box"></div></body>

ie7 及以下浏览器清浮动问题

<style>* {padding: 0;margin: 0;}.wrap {border: 1px solid #000;}.box1 {width: 300px;height: 300px;background-color: red;float: left;}.box2 {width: 200px;height: 200px;background-color: blue;float: left;}/* : 单冒号兼容性更好，不推荐用双冒号 :: */.clearfix:after {content: '';display: block;clear: both;}/* 兼容 ie7 及以下浏览器清浮动问题 */.clearfix {*zoom: 1;}</style></head><body><div class="wrap clearfix"><div class="box1"></div><div class="box2"></div></div></body>