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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。