导航:首页 > 万维百科 > 位置调整图片位子网页设计

位置调整图片位子网页设计

 发布时间：2021-02-03 10:38:07

1、css怎么调整背景图片的位置？

1、首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜内色的div标签，然容后给这个标签添加上class = "bg-img"。

3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

2、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>

可以看到背景图片出现的位置在浏览器的左上角，这个和默认的设置是一样的。

2、我们需要让图片出现在上方的正中间，这里我就用代码来说明问题，具体详细代码如下：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top center;

}


</style>

</head>

<body>

</body>

</html>

从下图的执行结果可以看到，我们的背景图片出现在了上方的正中间这个位置上了。

3、在上方的中间和左边都出现了，接下来设置图片出现在上方的右边，具体代码如下所示：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top right;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。

4、如果需要图片出现的位置在正中间，我们知道设计网页的时候背景图片等等元素一般都是需要放在正中间这个位置上的，这里我就来分析下如何将背景图片放置在正中间这个位置上，具体代码如下：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:center center;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下的执行结果，背景图片出现在了下方的正中间这个位置上了。

5、设置图片出现在背景图片的下方左边这个位置，下边用到了bottom这个属性值来设置的，具体代码如下：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:bottom left;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下图所示的结果，

6、还可以设置背景图片出现的位置在最下方，可以看到如下代码：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:bottom;

}


</style>

</head>

<body>

</body>

</html>

通过如下图可以看到具体的执行效果，只用一个bottom就能设置图片出现在最下方这个位置上了。

7、用background-position设置图片的位置除了使用相对位置还能使用绝对位置来设置，可以设置像素值来确定背景图片左上角的坐标点来确定，具体代码如下：

<html>

<head>

<title>图片位置设置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:150px 150px;

}


</style>

</head>

<body>

</body>

</html>

从下图可以看到我们的执行结果，背景图片出现的位置是150px,150px这个点作为左上角的起始点。

3、HTML 里面的图片怎么移动位置?

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

1、首先，打开html编辑器，新建一个html文件，例如：index.html，填充问题基础代码。

2、在index.html中的<img>标签，输入html代码：style="margin: 15px 20px 25px 30px;"。

3、浏览器运行index.html页面，此时图片被成功移动了位置到距离左侧30像素，上方15像素。

4、急急急，求大神，网页制作插入图片如何改变位置？

设置下它的CSS样式吧，水平居左对齐：text-align:left;垂直居顶部对齐：vertical-align：top,这样就会在左上角了呢

5、网页设计如何定义图片的位置和大小

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计. 网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Firefox等.
高度：
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。
宽度:
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001 注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.
如果是800的分辨率一般都设成770。但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.

网页设计标准尺寸:
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.
页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K
标准网页广告尺寸规格
一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。

六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式 像素大小 最大尺寸 备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片，FLASH格式 图文混排 各频道不同 15K 弹出窗口 400*300(尽量用gif) 40K BANNER 468*60(尽量用gif) 18K 悬停按钮 80*80(必须用gif) 7K

流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧) 网页中的广告尺寸 1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*60 4.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*60 7.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*60 9.内页底部通栏，尺寸760*60 10.左漂浮，尺寸80*80或100*10

6、HTML中如何设置插入图像的位置？

<img src="ad-02.jpg" width="400px"; height="200px"; style="position:absolute; left:100px; top:100px; ">修改left 和top的值。

7、网页制作中怎么用CSS样式定位图片的位置

就简单的图片定位是吧，我给你个范例，然后你参考下。 <div style="text-align:center" align="center"> <img src="" align="absmiddle" /> </div> 上面DIV中STYLE里CENTER是图片居中，ALIGN是表格框架居中，IMG中的ALIGN里的ABSMIDDLE是在表格中居中的图片绝对居中。 还有什么不懂的可以联系我。

8、怎样调整图片或FLASH在网页中显示的位置，懂网页设计的进！

用软件做表格确定位置

与位置调整图片位子网页设计相关的知识