请问如何通过css来剪切图片，而且不占位-CSDN论坛

请问如何通过css来剪切图片，而且不占位

Web 开发 > HTML(CSS)

收藏回复

[问题点数：20分]

⋅请问如何通过css来剪切图片，而且不占位 ⋅PHP新手请教：getimagesize不能获取远程图片信息！？？急 ⋅PHP新手问个很初级的问题 更多帖子 关注私信空间博客 BigNippleBoy 等级 本版专家分：0 结帖率 11.11%: 据我了解，clip是可以剪切图片的，但是实际上clip只是不显示全部图片而已，位置还是占那么多的。
比如下面一段代码：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:100px;
}
</style>
<script type="text/javascript">
function clipImage()
{
document.getElementById("img1").style.clip="rect(0px,50px,50px,0px)";
}
</script>
</head>
<body>

<img id="img1" border="0" src="http://img04.taobaocdn.com/imgextra/i4/415165877/T2JVyLXf8bXXXXXXXX_!!415165877.jpg" />

<input type="button" onclick=clipImage() value="Clip image" />

</body>
</html>

实际效果是：

请问：有没办法既能够剪切图片，图片又可以不完成占位的呢？

2013-01-15 09:10:29

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅首页怎么会有这样的代码？ ⋅Linux多个版本Python怎么解决？[已解决，散分，没人接分结不了贴] ⋅Linux多个版本Python怎么解决？ 更多帖子 关注私信空间博客 ImN1 等级 本版专家分：13608 勋章 红花 2013年10月其他开发语言大版内专家分月排行榜第一 黄花 2013年9月其他开发语言大版内专家分月排行榜第二 2013年8月其他开发语言大版内专家分月排行榜第二 2013年7月其他开发语言大版内专家分月排行榜第二 2011年4月 PHP大版内专家分月排行榜第二 蓝花 2013年10月 PHP大版内专家分月排行榜第三 2013年5月 PHP大版内专家分月排行榜第三 2013年4月其他开发语言大版内专家分月排行榜第三 2013年4月 PHP大版内专家分月排行榜第三 2013年3月其他开发语言大版内专家分月排行榜第三 2011年5月 PHP大版内专家分月排行榜第三: 坐标设负值，那么(0, 0)位置就可以移到你要显示的部分
具体找些UI例子看，现在很多UI都这样做的，一张很多小图标排列的图片，要显示其中一个就切片显示
目的是减少浏览时的请求数量，减轻服务器负担

这个是平衡的问题，因为对字节数较少的图片，服务器对请求回应的消耗比传输多个图片总字节数要多得多
但对于大字节数的图片，例如500K以上，（视乎需求）就应该先切开图片，分别传送，显示时再拼起来显示

2013-01-15 09:40:14

点赞只看TA 引用举报 #1得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 x131469828424 等级 本版专家分：0: web交流专用群。千人QQ群：203423135
我们的文化：此群贵在精，此精不是精英之精，而是一种态度，求学的态度，热心帮助他人的态度。

2013-01-25 11:35:39

点赞只看TA 引用举报 #2得分 0

收起

收藏回复

BigNippleBoy

等级：

关注私信 TA的帖子

图片 css 剪切_具有CSS剪切路径，滤镜和混合模式的多层效果: 图片 css 剪切CSS blend modes, clipping paths and filters make a number of effects that were previously available only in PhotoShop possible on the web. CSS混合模式，剪切路径和滤镜可实现许多以前仅在...

css span 右端对齐_span右对齐: 按钮工具栏在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组...

web前端@css选择器: web前端@css选择器超级详细文章很长需耐心阅读内容总览内容总览学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练...

CSS笔记: 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发...

css3样式布局: css3(cacsscadng style sheets):层叠样式表；面试前先把自己弄活跃起来（不然容易让场面冷下来，让自己发抖）；层叠样式表：由一条条规则组成的；规则由：选择器，声明块组成；声明块：由一条条声明组成； ...

CSS 基础笔记: 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样...

CSS-基础: CSS属性 padding：内边距; margin：外边距; padding | margin: top&bottom&left&right; padding | margin: top&bottom left&right; padding | margin: top right&left bottom; padding...

ueditor 编辑器增加css样式_在线代码编辑器CodeMirror简介: 1.什么是Code Mirror最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现CodeMirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端...

CSS最详细的基础教程: 层叠样式表CSS 绝对原创 CSS简介：Cascading Style Sheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用：是定义网页外观（例如，字体、背景、文本、位置、布局、边缘、...

CSS: 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。文字控制属性字号 – font-size 字体 – font-family 颜色 – color ...

ueditor关闭word转存功能，取消粘贴时自动把word图片替换为占位符: Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布网上找了很久，大部分都有一些不...

input输入框禁止复制粘贴剪切: 禁止剪切：oncut="return false" 禁止使用右键：oncontextmenu="return false" 自动获取焦点：autofocus="autofocus" 禁止自动更正：autocorrect="off" 来关闭键盘默认首字母大写(移动端)：autocapitalize="off...

前端学习之路---CSS: CSS学习内容下一篇 javascript基础（1） 1. 学会使用CSS选择器 2. 熟记CSS样式和外观属性 3. 熟练掌握CSS各种选择器 4. 熟练掌握CSS各种选择器 5. 熟练掌握CSS三种显示模式 6. 熟练掌握CSS背景属性 7....

css学习: 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开...

css属性: CSS Unicode字体 CSS外观属性 CSS复合选择器标签显示模式（display）块级元素(block-level) 行内元素(inline-level) CSS 三大特性 CSS 背景(background) 盒子模型（CSS重点）盒子边框（border）内...

CSS核心内容整理: css学习本文转自：http://my.oschina.net/blogshi/blog/214535 一. HTML标记与文档结构文本用闭合标签,引用内容用自闭合标签.常见的块级标签:~,,,,等.行内标签则有:,,,,,,等. 下面这是一个...

2.css: 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很.

css学习笔记: 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发...

CSS基础: 目录 CSS CSS三种引入方式三种css引入的优先级 CSS基础选择器 CSS高级选择器伪类与属性选择器 a标签的四大伪类字体样式边界圆角背景图片 ...

css知识梳理: 总结碰到的css样式问题，持续更新...父元素透明度对子元素的影响父元素透明度对子元素的影响如何使文本两端对齐父元素透明度对子元素的影响checkbox\radio通过点字也能选中或不选中css将彩色图片变黑白图片ie默认以1...

css笔记: CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了...

CSS总结（超多干货，内容略长）: 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发...

css布局: 边框与内容不挨着: padding 1、内补白内边距内填充 … Padding：内容与边框之间的距离，内边距。特点：会撑开所在的元素，重新计算宽高简写属性：四种设置值的方式 Padding:10px; 四个边 Padding:10px 20...

css: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10....

HTML+CSS+JS+Bootstrap+XML: 前端一、Web概念 1、JavaWeb：概念：使用Java语言开发基于互联网的项目 2、软件构架 1.C/S：Client/Server 客户端/服务器端优点：用户体验好缺点：开发、安装，部署，维护麻烦 ...

HTML和CSS: HTML+css的学习笔记，基础知识整理

-CSS-笔记-: 目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器 ...11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开...

CSS笔记总结: 1.a:link 未访问过的链接a:visited 已访问过的链接a:hover 鼠标滑过的链接、a:active 已选中的链接2.first-child选择元素的第一个子元素如：p:first-child 选中第一个p p>i:first-child 选中p元素里子元素...

CSS学习总结ing: css选择器：标签选择器、类选择器（class>>>黑点）、id选择器（#）、通配符选择器（*）注意：通配符选择器代表页面所有的的标签名，可以去掉浏览器自带的间距，如下代码所示： *{ margin:0; /*外间距*/...

C#入门必看实力程序100个: C#入门必看含有100个例字,每个例子都是针对C#的学习关键知识点设计的,是学习C#必须知道的一些程序例子,分享给大家，需要的可以下载

相关热词 c# 方法问号 c#生成失败没有错误 c# 淘宝数据 c# 全局钩子 c# 用户自定义控件关闭 c# 冒号 c# console颜色 c#以13 发送邮箱c# c#拖动条