• 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: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
  • 相关阅读:
    Vue3.0官方文档
    简单实现Vue的双向绑定原理
    小程序使用weapp-qrcode二维码插件,宽高自适应解决方法
    小程序判断ios还是android
    手写实现bind
    手写实现call,apply函数
    React onClick点击事件传参三种写法
    zynq 中断
    zynq_ps端点亮led灯代码
    突然发现自己的很多博客无法显示图片,人都傻了,于是就整理了一早上,全部换成了markdown格式,就好了,希望博客的时间不会对大家造成困扰!!!
  • 原文地址:https://www.cnblogs.com/wei-hj/p/6751777.html
Copyright © 2020-2023  润新知