链接：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. eureka集群基于DNS配置方式

    https://www.cnblogs.com/relinson/p/eureka_ha_use_dns.html   最近在研究spring cloud eureka集群配置的时候碰到问题:多台eu ...

  2. 洛谷P2261 余数求和

    整除分块的小应用. 考虑到 k % x = k - (k / x) * x 所以把 x = 1...n 加起来就是 k * n - (k / i) * i i = 1...k(注意这里是k) 对于这个 ...

  3. 在Java中调用与系统有关的剪切板Clipboard

    java从1.5版开始已经能与系统的剪切板很好的交互了. 如果可以在程序中直接调用系统的剪切板来保存“复制”的对象内容,那可以说的比之前的想法好很多. 下面是一个对java.io.File对象进行co ...

  4. 导出为word文档

    原来用freemarker就可以,真是太简便了.先设计一张文档,然后把要输出的值用freemarker取值表达式获取数据,最后保存为ftl文件,再调整一下就可以了.

  5. HDU 1079 Calendar Game （博弈）

    Calendar Game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. Python加载声音

    对于音频的操作可以使用pygame包中的sound 和 music对象进行音乐播放. Sound对象适合处理较短的音乐,如OGG和WAV格式的音频文件. Music对象出来可以播放OGG.WAV音频外 ...

  7. 过滤富文本编辑器中的html元素和其他元素

    https://blog.csdn.net/fjssharpsword/article/details/53467079 1.应用场景:从一份html文件中或从String(是html内容)中提取纯文 ...

  8. （贪心 map） Flying to the Mars hdu1800

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  9. node.js(node.js+mongoose小案例)_实现简单的注册登录退出

    一.前言 通过node.js基本知识对node.js基本知识的一个简单应用 1.注册 2.登录 3.退出 二.基本内容 1.项目结构搭建如图所示 2.这个小案列中用到了art-template子模板以 ...

  10. 2Servlet笔记

    1.静态页面(html) 2.动态 用户可以输入数据,和页面交互. 3 BS和CS的区别 BS :Browser Server(WEB 服务器)   CS : Client(qq tcp/ip协议) ...