css关于background、background-position的应用

时间 2019-11-30

标签 css 关于 background position 应用栏目 CSS 繁體版

原文原文链接

1,backgruond-color与backgroundhtml

<!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剩余宽度会由url

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

实际效果以下：

也就是说spa

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

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

为何呢？code

那你得先认识一下background究竟是何方圣神呢？htm

background的做用就是简写属性在一个声明中设置全部的背景属性。blog

能够设置以下属性：图片

全部背景属性在一个声明之中：it

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

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

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

 .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>