zoukankan      html  css  js  c++  java
  • background

    background-color:指定对象的背景颜色。

        aaaa    red     rgb()    rgba()    hsl()   hsla()
    

    background-image:指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”

        none: 无背景图。 
        url(): 使用绝对或相对地址指定背景图像。 
        linear-gradient: 使用线性渐变创建背景图像。(CSS3)
                    1.background-image:linear-gradient(yellow, green, red, blue);
                    2.background-image:linear-gradient(0, yellow, green);
                    3.background-image:linear-gradient(90deg, yellow, green);
                    4.background-image:linear-gradient(180deg, yellow, green);
                    5.background-image:linear-gradient(to left, yellow, green);
                    6.background-image:linear-gradient(to top left, yellow, green);
                    7.background-image:linear-gradient(135deg, yellow 20%, green 40%);
                    8.background-image:linear-gradient(to left,rgba(142, 142, 142, 0.5))
    
                    9.background-color:yellow;
                        background-image:linear-gradient(
                                                        135deg,
                                                        blue 25%,
                                                        transparent 25%,
                                                        transparent 50%,
                                                        blue 50%,
                                                        blue 75%,
                                                        transparent 75%,
                                                        transparent 100%
                            )
                        background-size:40px 40px;
                        background-repeat:no-repeat;
    
    
        radial-gradient: 使用径向(放射性)渐变创建背景图像。(CSS3)
                    1.background-image:radial-gradient(yellow,green);
                    2.background-image:radial-gradient(120px at center center, yellow ,green);
                    3.background-image:radial-gradient(120px at 80px 80px,yellow,green);
                    4.background-image:radial-gradient(circle at center center, yellow, green)
                    5.background-image:radial-gradient(ellipse at center center, yellow, green);
                
    
        repeating-linear-gradient: 使用重复的线性渐变创建背景图像。(CSS3)
                    background-image:repeating-linear-gradient(yellow 10%, green 16%);
    
    
    
        repeating-radial-gradient: 使用重复的径向(放射性)渐变创建背景图像。(CSS3) 
                    background-image:repeating-radial-gradient(yellow 10%, green 10%);
    

    background-repeat:指定对象的背景图像如何铺排填充。

        repeat
        no-repeat
    

    background-attachment:指定对象的背景图像是随对象内容滚动还是固定的。

        fixed
        scroll
        local
    

    background-position:指定对象的背景图像位置。

        (填写两个值或一个)
        百分比
        px
        center
        left
        right
        bottom
        top
    

    background-origin:指定对象的背景图像显示的原点。

        padding-box: 从padding区域(含padding)开始显示背景图像。 
        border-box: 从border区域(含border)开始显示背景图像。 
        content-box: 从content区域开始显示背景图像。 
    

    background-clip:指定对象的背景图像向外裁剪的区域。

        padding-box: 从padding区域(不含padding)开始向外裁剪背景。 
        border-box: 从border区域(不含border)开始向外裁剪背景。 
        content-box: 从content区域开始向外裁剪背景。 
        text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
    

    background-size:指定对象的背景图像的尺寸大小。

        length: 用长度值指定背景图像大小。不允许负值。 
        percentage: 用百分比指定背景图像大小。不允许负值。 
        auto: 背景图像的真实大小。 
        cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 
        contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
  • 相关阅读:
    【VS2013编译DirectX Tutorials时遇到的错误】"const wchar_t *" 类型的实参与 "LPCSTR" 类型的形参不兼容
    python3 登录接口
    Python-网络编程
    Python之mock接口开发
    python基础笔记(五):操作excel、mysql、redis
    python基础笔记(六):md5加密
    python3基础笔记(四):模块安装&os模块&时间模块
    python3基础笔记(三):函数
    python3基础笔记(二):文件操作、json操作
    Python3基础笔记
  • 原文地址:https://www.cnblogs.com/wei-hj/p/6751777.html
Copyright © 2011-2022 走看看