链接：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. POJ--2104 K-th Number （主席树模版题）

    题目链接 求区间第k大 #include<iostream> #include<cstring> #include<algorithm> #include<v ...

  2. MySQL命令，一篇文章替你全部搞定

    MySQL命令,一篇文章替你全部搞定 MySQL的基本操作可以包括两个方面:MySQL常用语句如高频率使用的增删改查(CRUD)语句和MySQL高级功能,如存储过程,触发器,事务处理等.而这两个方面又 ...

  3. Qt5应用改变窗口大小时出现黑影

    解决方法 在启动程序时,添加-platform wayland参数 添加QT_QPA_PLATFORM=wayland-egl到系统环境变量 注意:改完后虽然没有黑影,但软件图标显示不正常,也不能正常 ...

  4. poj3190 Stall Reservations

    我一开始想用线段树,但是发现还要记录每头cow所在的棚...... 无奈之下选择正解:贪心. 用priority_queue来维护所有牛棚中结束时间最早的那个牛棚,即可得出答案. 注意代码实现的细节. ...

  5. tyvj/joyoi 2018 小猫爬山

    2018,这个题号吼哇! 搜索第一题,巨水. WA了一次,因为忘了还原... #include <cstdio> ; int n, W, ans, weigh[N], cost[N]; i ...

  6. P1637 三元上升子序列

    thair 好,这个naive的东西因为只有三元,很好求解.只要把每个数之前小的L[i]与之后大的R[i]求一下即可. 求两次逆序对即可.那么答案便是∑(L[i]*R[i]); 对于更高元的,胡雨菲写 ...

  7. c# 获取机器硬件信息 （硬盘，cpu，内存等)

    using System; using System.Collections.Generic; using System.Globalization; using System.Management; ...

  8. js中两种定时器，setTimeout和setInterval的区别

    setTimeout只在指定时间后执行一次,代码如下:   <script>   //定时器 异步运行   function hello(){   alert("hello&qu ...

  9. Unity 着色器基础知识

    一.着色器基础知识 着色器通过代码模拟物体表面发生的事情,其实就是GPU中运行的一段代码. 着色器的类型: 顶点着色器.片元着色器.无光照着色器.表面着色器.图像特效着色器.计算着色器. 坐标空间: ...

  10. 数据库事务的隔离以及spring的事务传播机制

    数据库的事务隔离: MySQL InnoDB事务的隔离级别有四级,默认是“可重复读”RR(REPEATABLE READ). oracle默认的是提交读.RC 未提交读(READ UNCOMMITTE ...