css图片怎么定位_如何用css使一个用绝对定位的图片定位在网页一个具体位置

❶ 请问背景图片是如何用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 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度

❷ 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="按钮"

❸ 怎么用CSS给网页中的元素（图片、文字等）定位

<div> 图片、文字 </div>
一般我是同过设置 padding（补白） margin（边距）等样式来在页面上排版，
有一些就是position 是在整个页面上定位
=================================
position : static; /* 无定位 */
position : relative; /* 依物件左上角为基准取相当位置 */
position : absolute; /* 依网页左上角为基准取绝对位置 */
position : fixed; /* 固定位置不受滚动条影响 */
===================================
设置了position属性然后直接｛top:100px;｝还可以用margin-top:-100px;
margin在设置了position 后可以为负值例如“-100px;
”

❹ 如何用css使一个用绝对定位的图片定位在网页一个具体位置,不随网页大小等改变位置!

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

❺ css 背景图片的定位

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

❻ 怎么用CSS设置图片的位置。

用Css设置图片的位置的话：
1.通过position的绝对定位，然后在通过left和top就可以设置你的图片位置了；代码如下

<div style='position:absolut; left:0px; top:0px'>
<img src='图片地址'>

</div>

2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行，代码如下
<div>

<div style='flaot:left; width:330px; height:200px;'>
<p>我是左边的</p>

</div>

<div style='flaot:left; width:330px; height:200px;'>
<img src='图片地址'>
</div>
</div>

❼ css如何将图像定位在左下角

这要使用到css中的position:absolute;绝对定位。示例代码如下：

img{position:absolute;left:0;bottom:0;}

这里的意思就是，图片采用绝对定位的方式，距离左边0px，距离下边0px。这样就到了左下角了。

❽ CSS如何定位图像

定位用的最多是相对定位和绝对定位，可以直接把你的具体问题贴出来

❾ css将图片用相对定位到页面正中间

最简单的方法：给图片单独套个div，给div做margin设置就好了，设置用百分比，具体如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片居正中间__郭凯旗</title>
<style>
html{height:100%; width:100%}
body{height:100%; width:100%}
.d1{width:300px;
height:200px;
background:red;
position:fixed;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-150px;
}
.d1 img{width:100%;height:100%}
</style>
</head>
<body>
<div class="d1">
<img src="1.jpg"/>
</div>
</body>
</html>

❿ 如何用css精确定位小图片的位置

如何用css精确定位小图片的位置

首先设置固定图片的css属性是background-attachment
background-attachment它有两个属性值fixed/scroll
background-attachment：fixed;表示固定图片，图片不随着页面滚动而滚动。
background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动
background-position这个属性用来定位图片的位置。
我们重点给大家分享background-position这个属性
2background-position;的语法结构，用水平和垂直位置进行定位。
background-position:x y;
其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；
y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；
两个属性值得中间一定要用英文的空格，隔开。
代码如下：
<style type="text/css">
<!--
#img{
background-image:url("图片存放路径"); /*插入背景图*/
background-repeat:no-repeat; /*设置图片不重复*/
background-color:#00ffff; /*设置背景颜色*/
background-position:left center; /*用居中对齐设置水平距离，用下面对齐设置垂直距离*/
width:400px; height:150px; /*设置宽度和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左边距离上边距离。这个用来找图片。
比如一张大图上面有很多小图，你只想用到其中一个小图就用这个找。
代码如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("图片存放路径"); /*插入背景图*/
background-repeat:no-repeat; /*设置图片不重复*/
background-color:#00ffff; /*设置背景颜色*/
background-position:60px 50px; /*设置水平距离和垂直距离*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>

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

css图片怎么定位

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