① css如何控制图片位置
1、首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top left;
}
</style>
</head>
<body>
</body>
</html>
可以看到背景图片出现的位置在浏览器的左上角，这个和默认的设置是一样的。
② css 背景图片的定位
关键字, 例如: background-position: top right;
优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制像素, 例如: background-position: 0px 0px;
优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
③ 如何用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如何使背景图片水平居中
方法和详细的操作步骤如下：
1、第一步，打开前端开发工具，然后创建一个新的html代码页，见下图，转到下面的步骤。
⑤ 利用CSS定位背景图片到底定位在哪
设置background-repea属性
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
和background-position属性
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
⑥ 如何调整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怎么调整背景图片的位置
背景图片位置在CSS中有专门的属性来调整：background-position:x y;
x的意思是x轴的数值、百分比，位置。
y的意思是y轴的数值、百分比，位置。
你可以在你的CSS图片属性里加上background-position:10px 50px;
⑧ 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设置背景图定位的问题
你查查background-position并练习一下就知道了，背景图的两个偏移值可以用background-position:xy;表示。x是水平位置偏移，y是垂直位置偏移。
你可以用坐标来理解，图片左上角的坐标就是00。如-683px-162px就是：水平偏移683px，垂直偏移162px
具体的数值是根据你图片来定的，如下图：黑色的图片距离左边30px，距离顶部60px，那么background-position的两个值就是-30px -60px
⑩ CSS怎么样让背景图片水平（垂直）居中
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<bodyclass="bodybg">
<h2>针对当前div层背景居中</h2>
<h3>ps:背景图片是需要高度和内容撑开的。没有高度没有内容，背景图片是无法显示的</h3>
<divclass="bgImg">
</div>
</body>
<styletype="text/css">
.bgImg{
background:url(images/2.png)centerno-repeat;/*这个是简写,可以分开写*/
/*background-position:centercenter;*/
/*background-image:url(images/2.png);*/
/*background-repeat:no-repeat;*/
width:200px;
height:200px;
border:1pxsolid#000000;
}
.bodybg{
background:url(images/2-1.png)centerno-repeat;
height:100vh; /*一屏高度的表示*/
}
</style>
</html>