zoukankan      html  css  js  c++  java
  • WEB前端第九课——div背景

    1.div+css布局

      <div>特征

      ① 可以定义文档中的分区或节(division/section)

      ② 可以把文档分割为独立的、不同的部分,可以用作严格的组织工具

      ③ 是一个块级元素,它的内容会自动开始一个新行

      ④ 一般通过 id 或 class 标记与CSS配合使用

      常用到的CSS属性:

      数值、height:数值、background-color:颜色、float-left(是div不占据一行)

    2.background-color背景颜色

      默认值是transparent(透明的)

      当同时定义了背景图像和背景颜色时,背景图像将覆盖背景颜色之上

      颜色取值方式:

        ① 关键字,如red、blue等

        ② 16进制,如#000000、#cccccc、#ff0000等

        ③ rgb(0,0,0)

        ④ rgba(0,0,0, .n),n为0~1,透明度

    3.background-image背景图片

      默认值是none(没有图片)

      元素背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距

      通过url使用绝对或相对路径指定图片,background-image:url("");

    4.background-repeat背景图片是否重复

      常用属性:

      repeat,默认值,background-image默认水平方向和垂直方向平铺显示

      repeat-x,背景图片将在水平方向重复

      repeat-y,背景图片将在垂直方向重复

      no-repeat,背景图片将仅显示一次

      语法示例

    body{
            background-image: url("");
            background-repeat: no-repeat;
            }
    

    5.background-size背景图片尺寸

      length,设置背景图片的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为“auto”

      percentage,以父元素的百分比来设置图片的宽度和高度,后文同上

      cover,把背景图片扩展至足够大,以是背景图片完全覆盖背景区域,背景图片某些部分也许无法完全显示在背景区域中

      contain, 把图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域,背景区域某些部分可能无法完全覆盖

    6.background-position背景图片位置

      position是相对于外部容器而言,非整个页面

      属性值书写方式:

      ① 使用方位关键词定义,第一个值定义水平方向(left、center、right),第二个值定义垂直方向(top、center、bottom)

      ② 使用百分比定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0% 0%”,右下角是“100% 100%”

      ③ 使用具体数字定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0px 0px”

      属性特点:

      ① position的默认值为区域的左上角,即0点坐标

      ② 以上三种方式,如果仅定义了一个值,则另一个值为居中(center或50%)

      ③ 以上三种方式可以混合搭配使用

    7.background-attachment背景图片是否随内容滚动

      属性值:

      ① scroll,默认值,随页面其余部分的滚动而移动

      ② fixed,页面滚动时,背景图片不动

    body{
         background-image: url("");
         background-attachment: scroll;
         }
    

    8.background简写

      background 简写属性可以在一个声明中设置所有的背景属性。

      可以设置属性如下:

      background-color

      background-image

      background-repeat

      background-attachment

      background-position

      background-size

      如果不设置其中某个值,也不会出问题,自动取默认值

      在书写属性值时,没有严格顺序要求,建议按照上文列表顺序依次设置

  • 相关阅读:
    Codeforces 177G2 Fibonacci Strings KMP 矩阵
    Codeforces Gym100187C Very Spacious Office 贪心 堆
    Codeforces 980F Cactus to Tree 仙人掌 Tarjan 树形dp 单调队列
    AtCoder SoundHound Inc. Programming Contest 2018 E + Graph (soundhound2018_summer_qual_e)
    BZOJ3622 已经没有什么好害怕的了 动态规划 容斥原理 组合数学
    NOIP2016提高组Day1T2 天天爱跑步 树链剖分 LCA 倍增 差分
    Codeforces 555C Case of Chocolate 其他
    NOIP2017提高组Day2T3 列队 洛谷P3960 线段树
    NOIP2017提高组Day2T2 宝藏 洛谷P3959 状压dp
    NOIP2017提高组Day1T3 逛公园 洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划 最短路 拓扑序
  • 原文地址:https://www.cnblogs.com/husa/p/13347603.html
Copyright © 2011-2022 走看看