zoukankan      html  css  js  c++  java
  • 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()

      

      

  • 相关阅读:
    EF上下文容器,保存线程唯一性
    zabbix 监控服务器的TCP状态
    C++ 类里面,函数占用存储空间问题
    大道至简第一章读后感(伪代码)
    读大道至简有感
    String 部分源码分析
    LinkedList 源码分析
    ArrayList 源码分析
    定时取数据库的schema,并推送到git服务器
    全面解读python web 程序的9种部署方式
  • 原文地址:https://www.cnblogs.com/chenJieLing/p/11676691.html
Copyright © 2011-2022 走看看