背景属性

十月梦想

发布于 2018-08-29 02:25:55

47300

代码可运行

文章被收录于专栏：十月梦想十月梦想

运行总次数：0

代码可运行

背景属性

1.作用

设置背景颜色和背景图片

2.背景色

属性

background-color:值;

取值

任何合法性的颜色值

3.背景图片

属性

background-image:url();

4.背景属性

background-repeat:值

取值

no-repeat 不重复

repeat 重复(默认)

repeat-x 水平重复

repeat-y 垂直重复

  div{width:8000px;
    height:3000px;
    border:1px solid purple;
    background-image:url(timg.jpg);
    background-repeat:repeat-x;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.背景图片尺寸

属性

background-size:值;

取值

1.值1 值2;

宽高

% %

2.cover

覆盖将背景图片等比缩放

直到背景能覆盖元素的所有区域

3.contain

包含将背景图等比缩放

直到背景图像碰到右边或者下边时，停止缩放

导致图片显示不全

<style>
    
    div{width:800px;
    height:300px;
    border:1px solid purple;
    background-color:grey; 
    background-image:url(timg.jpg);
    background-size:contain;
    /*contain等比缩放 */
    /*cover超过*/
    /*1.值1  值2;  宽   高      */
     
           
    background-repeat:no-repeat; }
    </style>

6.背景定位

1.作用

改变背景图像在元素中的位置

2.语法

background-position:

取值

1. x y;

x:水平偏移距离

取值为正往右偏

取值为负往左偏移

y:垂直偏移距离

取值为正往下偏

取值为负往上偏

2.px px;

3.关键字

x:left/center/right：

y:top/center/bottom

#d1
{
width:80%;
height:120px;
border:1px solid gray;
margin-bottom:20px;



}
#d1-1
{
width:75px;
height:15px;
background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;
margin:10px 20px;

}
#d1-2
{
width: 80%;
height:110px;

border-top: 1px solid red;
margin:10px 20px;

}
#d2 a{
text-decoration:none;
border:1px solid grey;

padding:10px;
border-radius: 10%;



}
#d2 a:hover{
text-decoration: underline;
background-color: green;


}
#d2 #a1{
border:none;
color:black;


}

#d2 #a1:hover{
text-decoration: none;

background-color: white;

}

背景定位background-position首先

background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;

确定背景图像，定位位置，和背景重复

7.背景图片固定

属性：

background-attachment:

取值

1.fixed：背景固定不动

2.scroll：背景滚动

body{
background-image: url(timg.jpg);
background-attachment: fixed;
/*取值：fixed背景固定，p标签内容滑动*/
/*取值：scroll背景固定，p标签内容滑动*/
background-repeat: no-repeat;

}