• 8.css背景--background


    ①Background-attachment背景图像是固定还是随着页面滚动。Scroll默认,fixed固定。

    ②Background-color背景颜色。

    ③Background-image把图像设置为背景。

    ④Background-position背景图像的起始位置。

      方向:left,right,center,top,bottom可以两两配合使用。

      百分比:左上角是0% 0%,右下角100% 100%

      像素:左上角是0 0

    ⑤Background-repeat设置背景图像如何重复。No-repeat不重复,repeat-x沿着x方向重复。

    ⑥Background-size背景图片的大小。

      像素/百分比。

      Cover把背景图像扩展到足够大,以使图像完全覆盖背景区域。(不完全显示)

      Contain把背景图像扩展到最大尺寸,以使图像宽度和高度完全适应内容区域。

    ⑦Background-clip规定背景的绘制区域。

      Border-box背景被裁剪到边框。

      Padding-box背景被裁剪到内边距。

      Content-box背景被裁剪到内容框。

    ⑧Background-origin规定背景的定位区域。

      Border-box背景相对于边框来定位。

      Padding-box背景相对于内边距来定位。

      Content-box背景相对于内容框来定位。

      

    ⑨线性渐变背景:Linear-gradient(开始位置 角度,起始颜色,终止颜色 位置)

      ⑴开始位置:属性值可以是百分比、长度、leftrighttopbottom(可组合使用)

      ⑵角度:渐变终止方向的角度,当开始位置是数值或百分比可用。

      ⑶重复的线性渐变:repeating-linear-gradient()

      

       

    ⑩径向渐变背景:radial-gradient(开始位置 角度,起始颜色,终止颜色)

      ⑴ellipse椭圆,circle圆形。

      ⑵发散方向:left,right,top,bottom,center(可组合使用)

      ⑶大小(半径):可用像素或关键字。

        Closest-side:圆心到最近的边

        Farthest-side:圆心到最远的边

        Closest-corner:圆心到最近的角

        Farthest-corner:圆心到最远的角

      ⑷重复的径向渐变:repeating-radial-gradient()

      

      

  • 相关阅读:
    二叉树的最大深度与最小深度
    【C++学习笔记】由 const char* 引出的一系列问题
    【C++学习笔记】标准库容器Vector可变长度实现原理
    Python数据可视化之Matplotlib学习笔记
    python读取excel文件—xlrd
    ubuntu14.04下嵌入式工作环境搭建
    ubuntu14.04下交叉编译器的安装
    挂载nfs系统问题之: Root-NFS: Server returned error -13 while mounting
    关于开发板不能ping通外网IP
    Socket的协议地址属性
  • 原文地址:https://www.cnblogs.com/chenJieLing/p/11676691.html
Copyright © 2020-2023  润新知