背景

    链接:https://www.runoob.com/css/css-background.html

 

    1. 背景色:background-color(不能够继承,默认的颜色为透明色,父元素的背景色会透过子元素)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>背景色</title> 
<style>
body
{
    background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>我的 CSS web 页!</h1>
<p>你好世界!</p>

</body>
</html>

 

 

    2. 背景图片:background-image (默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体)

 

    3. 背景图片覆盖方式:background-repeat(平铺)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>背景色</title> 
<style>
body
{
    background-image: url("https://p0.ssl.qhimg.com/t013feee31537e51f3b.png");
    /*background-repeat: repeat-x;*/
    background-repeat:no-repeat;
}
</style>
</head>

<body>

<h1>我的 CSS web 页!</h1>
<p>你好世界!</p>

</body>
</html>

 

 

     

 

    4. 背景位置:background-position(改变图像在背景中的位置)

                                 

                                 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>背景色</title> 
<style>
body
{
    background-image: url("https://p0.ssl.qhimg.com/t013feee31537e51f3b.png");
    /*background-repeat: repeat-x;*/
    background-repeat:no-repeat;
    background-position: center;
}
</style>
</head>

<body>

<h1>我的 CSS web 页!</h1>
<p>你好世界!</p>

</body>
</html>

 

     5. 背景图像的附加方式: background-attachment:fixed(固定在原始位置)

    

 

 

 

    6. 快捷方式:background

                

 

 

      7. 总结:

                        

 

 

    

 

posted @ 2020-04-07 18:09  sjslove  阅读(187)  评论(0编辑  收藏  举报