CSS基礎-background的那些屬性

時間 2020-01-11

原文原文鏈接

background的那些屬性

background:背景的意思
經常使用的六個屬性html

1.background-color:背景顏色
2.background-image:背景圖像
3.background-position:圖片位置
4.background-repeat:圖片是否重複
5.background-attachment:圖片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三個屬性值爲
border-box（圖片或者顏色從邊框開始）;
padding-box（圖片或者顏色從padding部分開始）;
content-box圖片或者顏色從content部分開始）;

疑惑點1:圖像和顏色究竟是從邊框開始的？仍是從內容開始的？url

解答：背景圖像和顏色默認是從border開始鋪上去的。若是沒有border就從下一級開始。spa

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #000;
        }
        #box{
            width: 100px;
            height:100px;
            background: url(../../image/1.jpg);
            padding: 50px;
            border:10px dashed 
            rgba(255,255,255,.5);/*將邊框設置透明度，目的是查看是否從邊框開始平鋪的*/
      
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

運行效果圖：
code

疑惑點2:若是想設置圖像開始的位置怎麼辦？htm

解答：
background-clip: 背景裁剪。有三個屬性值爲
border-box（圖片或者顏色從邊框開始）;
padding-box（圖片或者顏色從padding部分開始）;
content-box圖片或者顏色從content部分開始）;blog

疑惑點3:background-position的屬性值有那些寫法？圖片

解答：定位是從border的左上角開始。background-position：x,y;

第一個值是距離左邊的距離
第二個值是距離上邊的距離
x:left,center,right
y:top,center,bottomip

background-position：10px; 只有一個值時，默認第二個值是center
background-position：10px bottom;
background-position: bottom 10px ;當存在數值的時候，順序寫錯則不顯示。存在數值時順序必須寫對。要按照前面是x值，後面是y值來寫。eg：background-position: 10px bottom ;才正確。
background-position: bottom right;當不存在數值的時候，順序無所謂。it

疑問4: background的複合屬性如何寫呢?
解答：background:先考慮是否圖片重複，在考慮位置。io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border:10px solid pink;
            padding: 50px;
            background:url(../../image/1.jpg) no-repeat center content-box;
        ;
        }
    </style>
</head>
<body>
<div class="box"></div>
<!--background:先考慮是否圖片重複，在考慮位置-->
</body>
</html>


效果圖爲：

相關標籤/搜索

每日一句

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