HTML背景图片的相对位置设置

链接: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

原文地址:https://www.cnblogs.com/wanlibingfeng/p/9875043.html

时间: 2024-10-08 15:36:11

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

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

WPF中背景图片的平铺设置

1 <ImageBrush x:Key="winBackgnd" TileMode="Tile" Viewport="0,0,100,100" ViewportUnits="Absolute" ImageSource="actionPlate.jpg"></ImageBrush> 1.TileMode="Tile"设置使用平铺: 2.ViewPort与Viewpo

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

先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog(Context context, int theme) {    super(context, theme);} public SelectDialog(Context context) {    super(context);} @Overrideprotected void onCreate(

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

background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1.auto:默认值,不改变背景图片的原始高度和宽度: 2.<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放: 3.<百分比>

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

css3背景图片百分比

原文链接:http://caibaojian.com/background-position-percent.html background-position: 50% 0; background-size: 100% auto: via对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放.详情可见css3 background.原文来自:http://caibaojian.com/background-position-percent.ht

Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解

今天继续给大家分享下View的相关知识,重点有一下两点:   1.View的几种不同状态属性            2.如何根据不同状态去切换我们的背景图片. 开篇介绍:android背景选择器selector用法汇总 对Android开发有经验的同学,对 <selector>节点的使用一定很熟悉,该节点的作用就是定义一组状态资源图片,使其能够 在不同的状态下更换某个View的背景图片.例如,如下的hello_selection.xml文件定义: <?xml version="

CSS3:background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe