背景图片定位

background-position属性可以给背景图片定位。

background-position属性有两个值，第一个值是水平位置，第二个值是垂直位置。这两个值可以使用百分比来表示（50% 50% 表示垂直和水平都居中）。

也可以使用下面的方式表示：

  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center bottom
  • right top
  • rigth center
  • right bottom

下面的代码演示了背景图像定位。

<!DOCTYPE html>
<html>
    <head>
        <title>图片定位</title>
        <style type="text/css">
            body {
                background-image: url("https://www.liyongzhen.com//docs/images/spring-flower.png");
                background-repeat: no-repeat;
                background-position:center top;
                color: #665544;
                padding: 20px;}
            h1 {
                color: white;}
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
        <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
        “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
        截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
    </body>
</html>
 
图片来源 https://www.kisspng.com/

CSS 背景图像 背景图片定位的更多相关文章

  1. 2013-10-25笔记，css: mini-width, 标准居中，样式中*号使用，背景图像位置定位

    mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  4. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  5. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  6. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  7. 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

  8. HTML+CSS—背景图片、图片定位

    设置背景图片格式: background-image: url(img/ic.jpg); 注意点: 如果父容器面积大于背景图片,默认显示该图片整面平铺 设置是否需要平铺属性: background-r ...

  9. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

随机推荐

  1. innobackupex: error while loading shared libraries: libssl.so.6

    我遇到过这个问题,但由于测试环境不允许上网,所以虽然搜到了一篇解决办法,但我也未亲自测试,先记录下来别人的解决办法. 参考文章:http://blog.itpub.net/29654823/views ...

  2. Java annotation浅析

    自定义annotation @Documented@Retention(RetentionPolicy.RUNTIME)@Target({ElementType.FIELD,ElementType.M ...

  3. 工控随笔_17_西门子_WinCC的VBS脚本_06_过程和函数

    和其他语言一样,vbs提供了过程和函数机制,通过函数和过程可以优化代码结构和实现代码复用, 减少代码的编写量. 一.代码 具体不再多说,看实例代码. ' vbs的函数和过程 '1.过程式编程是一大编程 ...

  4. PHP 概览

    运行环境 Windows Linux  Centos Ubuntu MacOS 编辑器 编码风格 依赖管理 Composer 发布包 热门框架 热门类库 热门系统 架构支持 源码分析 扩展开发

  5. [ZZ]MTSC 2017 Mobile Testing@Google 演讲的感受

    原文地址: https://testerhome.com/topics/9364 Mobile Testing@Google 其实在开始听谷歌的张南和潘岩开始演讲前,了解下 Google Test C ...

  6. yolo v2使用总结

    以下都是基于yolo v2版本的,对于现在的v3版本,可以先clone下来,再git checkout回v2版本. 玩了三四个月的yolo后发现数值相当不稳定,yolo只能用来小打小闹了. v2训练的 ...

  7. winrar+目录穿透复现

    前言: 学习下该漏洞,记录下这是自动化复现,没有具体分析.菜逼只会用. 00x1: 漏洞简单描述: 该漏洞事一个由UNACEV2.dll代码库中的一个深藏已久的漏洞 当攻击者制作一个恶意的ACE文件时 ...

  8. C语言排序算法学习笔记——交换类排序

    交换类排序:根据序列中两个元素关键字的比较结果来交换他俩在序列中的位置. 冒泡排序:假设待排序表长为n,从后往前(或从前往后)两两比较相邻元素的值,若为逆序(即A[i-1]>A[i])则交换他们 ...

  9. 转载：深入浅出Zookeeper

    ZAB协议 ZAB协议是专门为zookeeper实现分布式协调功能而设计.zookeeper主要是根据ZAB协议是实现分布式系统数据一致性. zookeeper根据ZAB协议建立了主备模型完成zook ...

  10. wdk1703+vs2015编译的诡异问题

    最近将wdk升级到1703(10.0.15063.0)版本,编译一个新建的minifiter项目居然出现了失败 提示错误为 WindowsDriver.common.targets(460,5): e ...