CSS3——背景相关属性

电玩女神 2023-07-03 07:07 51阅读 0赞

# 背景相关属性 background #

background:是一个复合属性，包含

*  background-color背景颜色
 *  backgroun-image背景图片 background-repeat背景图片是否平铺
 *  background-position背景图片位置（指定该属性前，必须先指定背景图片）
 *  background-attachment设置背景图片是随内容滚动scroll还是固定fixed的

#### CSS3新增的背景属性 ####

background-clip：背景覆盖的范围  
（HTML默认元素的背景只覆盖填充区和内容区，而background-clip可以指定背景要覆盖的范围）  
background-orign：设置背景覆盖的起点，类似于 background-position  
background-size：背景图片的大小，由高度、宽度组成。支持长度值、百分比、auto

### 渐变背景 ###

语法：linear-gradient(方向？颜色列表)  
方向可以省略，如果省略的话，渐变默认为从上到下

方向参数有如下参数值：  
to-top：从下到上  
to bottom：从上到下  
to left：从右到左  
to right：从左到右  
to left top：从右下角到左上角  
to left bottom：从右上角到左下角（符合对角线原则）  
Ndeg：指定角度值，顺时针

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div{ 
                height:300px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="dvl" style="background-color: linear-gradient(red,blue);"></div>
        <button οnclick="change(this.innerHTML);">to top</button>
        <button οnclick="change(this.innerHTML);">to bottom</button>
        <button οnclick="change(this.innerHTML);">to left</button>
        <button οnclick="change(this.innerHTML);">to right</button>
        <button οnclick="change(this.innerHTML);">to left top</button>
        <button οnclick="change(this.innerHTML);">to right top</button>
        <button οnclick="change(this.innerHTML);">to left bottom</button> <script type="text/javascript"> function change(val){ 
            document.getElementById("dvl").style.background="linear-gradient("+ val +",red,blue)";
        }
        </script>
    
    </body>
    </html>

**以上两个示例代码都是渐变背景的例子**