链接：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. 【翻译】七个习惯提高Python程序的性能

    原文链接:https://www.tutorialdocs.com/article/7-habits-to-improve-python-programs.html 掌握一些技巧,可尽量提高Pytho ...

  2. Linux下无法运行Color picker

    ➜ ~ com.github.ronnydo.colorpicker com.github.ronnydo.colorpicker: error while loading shared librar ...

  3. （转）java中引用传递和值传递

    https://blog.csdn.net/javazejian/article/details/51192130 https://www.cnblogs.com/perfy/archive/2012 ...

  4. Spring MVC 架构的java web工程如何添加登录过滤器

    发布到外网的web工程必须添加登录过滤器来阻挡一些非法的请求,即只有登录的用户才能对web工程进行请求,否则无论请求什么资源都需要调整到登录页面进行登录操作.这时就需要用到过滤器,其实非常简单,只需要 ...

  5. Installation failed with message Failed to finalize session: INSTALL_FAILED_TEST_ONLY:installPackageLI.

    这样还不行的话,加 -t吧.

  6. 高级组件——选项卡面板JTabbedPane

    选项卡面板:JTabbedPane(标签位置,布局方式) 标签位置:JTabbedPane.TOP,JTabbedPane.BOTTOM,JTabbedPane.LEFT,JTabbedPane.RI ...

  7. MySQL存储过程实现动态执行SQL

    --存储过程名和参数,参数中in表示传入参数,out标示传出参数,inout表示传入传出参数 create procedure p_procedurecode(in sumdate varchar(1 ...

  8. jmeter打开图形化界面时指定代理

    \apache-jmeter-4.0\bin>jmeter -Dhttp.proxyHost=127.0.0.1 -Dhttp.proxyPort=8888 如果不想在每个请求里面指定代理的话可 ...

  9. JAVA核心技术I---JAVA基础知识（列表List）

    一:List了解 (一)List:列表 –有序的Collection –允许重复元素 –{,,,{,},,} (二)List:主要实现 同步/非同步:针对线程而言 –ArrayList(非同步的) – ...

  10. 立个Flag不学好PHP誓不罢休

    3年前从部队退伍退伍回来,就莫名其秒的爱上的编程,复学期间我几乎忘记了本专业的知识(原本我是读书籍设计的),从刚刚开始的C程序开始,一路走到一拿起书本我就几乎是睡着的状态,后来就开始了视频的学习之路, ...