背景图片怎么定位_请问背景图片是如何用CSS定位的我指的不是定位图片位置而是定位一张背景图片中很多图片中的一个图片

‘壹’ CSS中背景图片定位怎么只知道图片的具体坐标

这个回答起来有点复杂，background-position:right -108px 就是你图片往左108个像素，这要发挥你的空间相像力，如有两个十字架，粗细一样，但长短不一样，然后短的十字架是固定的，那么你只有移动大的十字架，才能把两个十字加相互重合起来，要计算小ICO的位置，公式应该是：-（ico绝对位置-定义对像的绝对位置）

‘贰’ 如何调整css背景图片的位置

你的CSS样式写的太不规范了，
#Channel_boundary{
width:1px;
background: #D4D0C8 repeat-y;
float:left;
height:60%;
line-height:60%;
background-position:10px 20px;
}
设置背景色的时候，不能用repeat-y这类属性，也不能用背景定位background-position，这些属性只用在背景图片的时候。还有在设置高度的时候最好不要用百分比，将样式修改一下就OK了。如下：
#Channel_boundary{
width:1px;
background-color: #D4D0C8;
float:left;
height:20px;
margin-top:10px;
overflow:hidden;
}
height和margin-top的值可以自行调整，直到你满意的位置为止。

‘叁’ CSS使用图片做背景，如何精确定位图片位置

根据你的图片做了下面的样式，主要做法是定位，切割图片，可以使用windows的画图工具先定位每个你需要的图片的位置（在下面的状态栏有坐标，得到的坐标前面加上一个负号），图片左上角为x/y对应的0/0， background-image：相对地址指定背景图像， background-position：指定背景图像位置，下面是例子，这个要多练习研究就会了。多看看CSS方面的说明 .icon {background-image: url(back_image.png)} .head {height: 26px; background-position: -42px -222px; background-repeat: no-repeat;} .btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(back_image.png); background-position: -42px -222px; background-repeat: no-repeat;} <div style="width: 107px; height: 200px;" <div class="icon head" style="line-height: 26px; padding-left: 20px;"这是头部</div 这里是内容！</div</div/<input type="button" class="btn" value="按钮"

‘肆’ html中,怎么把背景图片置于最低层

1、用css的z-index的属性就可以实现。首先新建一个html文件，在文件中写入一个div容器和一个图片：

‘伍’ css 背景图片的定位

关键字, 例如: background-position: top right;
优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制
像素, 例如: background-position: 0px 0px;
优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

‘陆’ CSS背景图片定位技术

background-position:-150px 0px 这句话的意思，在这个图片的x轴150px处和Y轴0处的交叉点的确定！也就是定位！

定位技术就是把网站的小icon放到一张大的pic里面通过不同的X、Y的坐标取值，得到不同的pic！

比如阿里巴巴的这个pic http://img.china.alibaba.com/images/homepage/index0906/body-bg.png

‘柒’ dw如何将背景图片放在任意位置

用DW的话，可以通过CSS把背景图片通过“坐标”设定到“任意”位置。
这个呢，应该是比较好弄的，你在CSS面板里面找到“背景”，之后再相应的
background-position(x)(和background-position(y)里面输入相应的数值（比如100）就好，也可输入如果“left”、“right”或“center”（分别代表左对齐、右对齐和居中对齐）。
大概就是这样了，不知道说明白没有。不行的话，你再HI我好了。

‘捌’ css背景图定位截取

要调整背景图的渲染尺寸，需要用到background-size这个样式规则，但这是CSS3新增的，所以目前暂时没有全兼容的解决方案。

哦，这个意思，那么如果你贴背景图的容器高度与背景图那几个logo一致，就采用纵向排列图片，垂直定位的方式；如果容器宽高都比logo尺寸大，那就没办法了，再嵌入一个小容器专门显示这个图标吧。

‘玖’ 背景图片如何定位。div 设置 border padding 数值后。定位原点是在padding 左上角开始

结合下面的代码和图自己看看

<html>

<head>

<metacharset="utf-8">

<styletype="text/css">

.div1{width:200px;height:200px;background:#f00;padding:50px;border:solid20px#0f0;}

</style>

</head>

<body>

<divclass="div1">

ppppppppp

</div>

</body>

</html>

‘拾’ 请问背景图片是如何用CSS定位的我指的不是定位图片位置，而是定位一张背景图片中很多图片中的一个图片

美国YAHOO在页面制作中所用到的图片整合技术，这样做虽然需要花一定的时间来有规则的合并这些ICON，栏目背景，图片按钮，以方便CSS调用，但是这样做绝对是合算的，而且是有必要的，YSlow也是极力推荐的。

实现方法：

首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;

浅谈CSS Sprites技术以及图片优化〔背景图整合〕

关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。

图片优化

一、对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能为你节省10%-30%的文件体积。

二、Photoshop相比起Fireworks，导出同等质量的PNG图片，体积会稍大。而Fireworks虽然做了相应压缩优化，但没有达到最优秀的压缩。

三、我所知的设计软件，对于PNG图片的处理都没做到最优秀的压缩，图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。

四、图片体积及尺寸方面，建议体积保持在100K以内(较为符合国情最佳请求SIZE)，size为800px(最佳尺寸)。(从某权威人事中得知，具体无从考证)

CSS Sprites图片切割术

一、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。

二、不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。

三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。

四、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。

五、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。

六、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。

七、图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。

八、区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。

九、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

相关的图像优化工具，网上流传的优化工具繁多常见的如：

ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。

众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度

导航:首页 > 动漫图片 > 背景图片怎么定位

背景图片怎么定位

与背景图片怎么定位相关的资料