css关于background、background-position的应用

最新推荐文章于 2023-12-11 11:51:16 发布

allenmu1982

最新推荐文章于 2023-12-11 11:51:16 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/qianxunpu/p/7200326.html

版权

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>

转载于:https://www.cnblogs.com/qianxunpu/p/7200326.html

allenmu1982

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css关于background、background-position的应用

1,backgruond-color与background<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片背景研究</title> <style> ....
复制链接

扫一扫