zoukankan      html  css  js  c++  java
  • ch4 背景图像基础

    如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在body上应用background-image,默认情况下浏览器水平和垂直的重复显示背景图像,让图像平铺在整个页面上,可以选择背景图像是垂直平铺、水平平铺、不平铺。
    如果希望在网页的开头显示一个人大的品牌图像,且不包含人格信息,是纯表现性的,那么实现的方式是创建一个“钩子”,即为该图像创建一个空div,并给该div设置尺寸与图像相同,指定图像不重复。

    #branding{
      width:700px;
      height:200px;
      background-image:url(/img/branding.gif);
      background-repeat:no-repeat;
    }

    设置背景图像的位置:如下图,假设要在站点的额每个标题上添加一个项目符号

    h1{
      padding-left:30px;
      background-image:url(/img/bullet.git);
      background-repeat:no-repeat;
      background-position:left center;
    }

      关键词left、center指出了图像的位置,除了用关键词之外,还可以使用像素或百分数来设置背景图像的位置(faux列中也有同样的定义)。

    • 使用像素设置背景的位置:图像的左上角会定位在距离元素左上角指定像素数的地方。
    • 使用百分数定位:会对图像上的对应点进行定位,例如:将垂直和水平位置设置为20%,那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。

    使用百分数实现前面的项目符号示例,需要将垂直位置设置为50%,就会使得项目符号图像垂直居中:

    h1{
      padding-left:30px;
      background-image:url(/img/bullet.git);
      background-repeat:no-repeat;
      background-position:0 50%;
    }
  • 相关阅读:
    Python全栈开发——装饰器
    Python全栈开发——类
    Python全栈开发——Json & pickle & shelve & sys模块
    Python全栈开发——正则表达式
    实验3- 熟悉常用的 HBase 操作
    Hbase PleaseHoldException错误
    HDFS 中文件操作的错误集锦
    ubuntu在虚拟机下的安装 ~~~ Hadoop的安装及配置 ~~~ Hdfs中eclipse的安装
    假期周进度报告---08
    假期周进度报告---07
  • 原文地址:https://www.cnblogs.com/lmjZone/p/7738643.html
Copyright © 2011-2022 走看看