链接：https://jingyan.baidu.com/article/ff42efa9c22b11c19e220200.html

重点：background-attachment，    background-position

方法/步骤

  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这个点作为左上角的起始点。

    END

HTML背景图片的相对位置设置的更多相关文章

  1. css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

    背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和 ...

  2. Swift自定义UINavigationController（背景颜色、背景图片、返回按钮设置、字体大小等）

    1.0  自定义UINavigationController时,背景图片.颜色等只需要设置一次,所以我们可以重写  initializa  这个方法来实现我们想要的效果 override  class ...

  3. background-origin 设置背景图片原始起始位置

  4. CSS那个背景图片的坐标怎么设置？怎么计算的？

    background:url(images/hh.gif) no-repeat -10px 0;},作用是移动背景的位置. 背影图片的左上角相对当前元素左上角的坐标. 右为X轴正半轴, 下为Y轴正半轴 ...

  5. android 自定义Dialog背景透明及显示位置设置

    先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...

  6. （转）background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

  7. background-size （设置背景图片的大小）

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  8. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  9. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

随机推荐

  1. 洛谷P3168 任务查询系统

    题意:有n个任务,第i个的存在时间是li~ri,有个权值.求t时刻第k大的权值. 这毒瘤...本来是前缀和 -> 主席树,我是树套树...然后光荣TLE. 其实很裸.一开始我写的是每个位置维护一 ...

  2. BZOJ1299 巧克力棒

    题面: TBL和X用巧克力棒玩游戏.每次一人可以从盒子里取出若干条巧克力棒,或是将一根取出的巧克力棒吃掉正整数长度.TBL先手两人轮流,无法操作的人输. 他们以最佳策略一共进行了10轮(每次一盒).你 ...

  3. 【洛谷P3275】糖果

    题目大意:维护 M 个差分约束关系,问是否可以满足所有约束,如果满足输出一组解.\(N<=1e5\) 题解:差分约束模型可以通过构建一张有向图来求解.是否满足所有约束可以利用 spfa 进行判断 ...

  4. 数据库之sql语句汇总20180616

    /*******************************************************************************************/ 一.SQL简 ...

  5. Contest1593 - 2018-2019赛季多校联合新生训练赛第三场（部分题解）

    H 10255 自然数无序拆分 H 传送门 题干: 题目描述 美羊羊给喜羊羊和沸羊羊出了一道难题,说谁能先做出来,我就奖励给他我自己做的一样礼物.沸羊羊这下可乐了,于是马上答应立刻做出来,喜羊羊见状, ...

  6. CodeForces1065F 树形dp

    http://codeforces.com/problemset/problem/1065/F 你有一棵带有n个结点的树,根是结点1.有一个标记,最初在根结点处.你可以将标记移动到其他结点处.假设标记 ...

  7. 2017-12-15python全栈9期第二天第五节之while else的用法二当不被break打断时else内容的结果会被打印

    #!/user/bin/python# -*- coding:utf-8 -*-count = 0while count <=5 : count += 1 if count == 3 : pas ...

  8. Event Recommendation Engine Challenge分步解析第六步

    一.请知晓 本文是基于: Event Recommendation Engine Challenge分步解析第一步 Event Recommendation Engine Challenge分步解析第 ...

  9. ansible 基础一

    安装 解决依赖关系: yum -y install python-jinja2 PyYAML python-paramiko python-babel python-crypto tar包安装 htt ...

  10. NoSQL数据库Mongodb副本集架构（Replica Set）高可用部署

    NoSQL数据库Mongodb副本集架构(Replica Set)高可用部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. MongoDB 是一个基于分布式文件存储的数据库.由 C ...