css关于background、background-position的应用

1,backgruond-color与background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片背景研究</title>
    <style>
        .wrap{
            width:1000px;
            height:463px;
            background-color:#5fb878;
            background:url(images/3.jpg) no-repeat;
        }
    </style>
</head>
<body>
<div class="wrap"></div>

</body>
</html>

div的背景图片大小是580*463px,现在设置div宽度的小是1000px,我预想的情况是，div剩余宽度会由

background-color填满，预期效果如下：

实际效果如下：

也就是说

background-color设置的背景色被放在下面优先级高的background给层叠掉了，只要你把background-color样式设置在background的后面，就会出现预期效果。

 .wrap{
            width:1000px;
            height:463px;
            background:url(images/3.jpg) no-repeat;
            background-color:#5fb878;
        }

为什么呢？

那你得先认识一下background到底是何方圣神呢？

 

background的作用就是简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

所有背景属性在一个声明之中：

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

二， 接下来再总结一下background背景图片与padding之间的关系：

当div的大小与图片大小一致的时候：设置div--padding 10px;

 .wrap{
            width:580px;
            height:463px;
            background:url(images/3.jpg) no-repeat #5fb878 center;
            padding:10px;

        }
    </style>
</head>
<body>
<div class="wrap"></div>

效果如图：

2，当div高度小于背景图的高度时，如果有padding,背景图会自动填充padding

.wrap{
            width:580px;
            height:443px;
            background:url(images/3.jpg) no-repeat #5fb878 center;
            padding:5px;
        }

 

 如果:padding值是20px,此时div的height--443px+padding的高度20*2=483px大于背景图的高度,那么此时背景图的高度依然是463px,并且还有剩余的padding--10px.

  .wrap{
            width:580px;
            height:443px;
            background:url(images/3.jpg) no-repeat #5fb878 center;
            padding:20px;
        }
    </style>
</head>
<body>
<div class="wrap"></div>

</body>

 

 

 



posted @ 2017-07-18 14:29  千寻的天空之城  阅读(251)  评论(0)  编辑  收藏  举报