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()

      

      

  • 相关阅读:
    linux 系统自签免费ssl证书和nginx配置
    new pdo 连接很慢的原因和解决办法
    Http请求头和响应头(Get和Post)
    亿级Web系统搭建――单机到分布式集群 转载
    php缓存机制
    八大设计模式
    按照子查询结果的顺序进行查询
    Exception in thread "main" java.util.ConcurrentModificationException异常
    理解Maven中的SNAPSHOT版本和正式版本
    IDEA配置GIT
  • 原文地址:https://www.cnblogs.com/chenJieLing/p/11676691.html
Copyright © 2011-2022 走看看