关于HTML中集成图片 用img标签取坐标 还有 background取个范围平铺的问题。
就是我把所有的网页需要的小图片全部集中到一张图片里面想说需要哪部分就取哪部分的坐标，我就是想知道<imgsrc="xxx.gif">能不能只取xxx.gif的某个部分，还...
就是我把所有的网页需要的小图片全部集中到一张图片里面想说需要哪部分就取哪部分的坐标，我就是想知道<img src="xxx.gif">能不能只取xxx.gif的某个部分，还有就是一个栏目分上中下三个背景 需要自适应高度所以中间的背景要平铺实现，所以我想问问集成图片能否取某个范围平铺的，望各位高手指导下，小弟在此先谢过啦！
展开
3个回答
展开全部
img 可以实现你要的第一个功能，下面代码就是只显示图片右下角20X20区域：
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" style="position:absolute;clip:rect(26px 137px 46px 117px)">
可以通过背景图片的定位来截取某一部分做背景，但只有在no-repeat下定位才能实现：
<style>
.btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif); background-position: -117px -20px; background-repeat: no-repeat;}
</style>
<input type="button" class="btn" value="按钮">
如果把no-repeat改为repeat-x，则只有最前面显示的是部分图片，后面平铺显示的是整张图片。
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" style="position:absolute;clip:rect(26px 137px 46px 117px)">
可以通过背景图片的定位来截取某一部分做背景，但只有在no-repeat下定位才能实现：
<style>
.btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif); background-position: -117px -20px; background-repeat: no-repeat;}
</style>
<input type="button" class="btn" value="按钮">
如果把no-repeat改为repeat-x，则只有最前面显示的是部分图片，后面平铺显示的是整张图片。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
mg 可以实现你要的第一个功能，下面代码就是只显示图片右下角20X20区域：
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" style="position:absolute;clip:rect(26px 137px 46px 117px)">
可以通过背景图片的定位来截取某一部分做背景，但只有在no-repeat下定位才能实现：
<style>
.btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif); background-position: -117px -20px; background-repeat: no-repeat;}
</style>
<input type="button" class="btn" value="按钮">
如果把no-repeat改为repeat-x，则只有最前面显示的是部分图片，后面平铺显示的是整张图片。
<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" style="position:absolute;clip:rect(26px 137px 46px 117px)">
可以通过背景图片的定位来截取某一部分做背景，但只有在no-repeat下定位才能实现：
<style>
.btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif); background-position: -117px -20px; background-repeat: no-repeat;}
</style>
<input type="button" class="btn" value="按钮">
如果把no-repeat改为repeat-x，则只有最前面显示的是部分图片，后面平铺显示的是整张图片。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
坐标裁剪图片需要用到HTML5的canvas表现，配合JS实现，记得把IMAGE的路径改一个可用的，就可以看到效果了，你的第二问我没看懂
代码如下
<!doctype html>
<html><head>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("mc");
var context0 = canvas.getContext("2d");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image01 = new Image()
var image02 = new Image();
image02.onload = function(){
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 300;
var sourceHeight = 300;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(image02,0,0);
context0.drawImage(image02, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight);
};
image01.src = "1.jpg";
image02.src = "1.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1024" height="400">
</canvas>
<canvas id="mc" width="578" height="400">
</canvas>
</body></html>
代码如下
<!doctype html>
<html><head>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("mc");
var context0 = canvas.getContext("2d");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image01 = new Image()
var image02 = new Image();
image02.onload = function(){
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 300;
var sourceHeight = 300;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(image02,0,0);
context0.drawImage(image02, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight);
};
image01.src = "1.jpg";
image02.src = "1.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1024" height="400">
</canvas>
<canvas id="mc" width="578" height="400">
</canvas>
</body></html>
追问
先谢谢你回答了第一个问题！这个难道不用JS就无法实现么？然后第二个问题就是说 我要将集成图片的部分作为背景进行横向或纵向平铺可能做到么？比如我的插图，我希望它作为背景是中间的内容那段可以上下拉伸的，如果只用我那个插图可以做到么，可以的话是如何做到的？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
