如何使用css設定背景圖的重複與否-前端問答-PHP中文網

如何使用css設定背景圖的重複與否

醉折花枝作酒筹

發布： 2021-08-13 14:30:39

原創

2816 人瀏覽過

上一篇文章中我們了解了定位元素背景圖像的方法，請看《一招搞定css定位元素的背景圖像》。這次我們來了解設定背景圖重複的方法，有需要的可以參考參考。

當我們有一張背景圖的時候，如何設定這個背景圖的平鋪方式呢？

先來看一個小栗子，就拿上篇的程式碼吧。

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

登入後複製

這個結果是

如何使用css設定背景圖的重複與否

我們可以看到，這個小例子中的背景圖一直都是這張，但是圖片出現的次數發生了改變，這是什麼原因呢？可以看到，我們修改了background-repeat這個屬性的值，今天我們就來談談這個屬性。

background-repeat屬性設定是否及如何重複背景圖片。背景影像可以沿著水平軸，垂直軸，兩個軸重複，或完全不重複。預設地，背景圖像在水平和垂直方向上重複。重複的圖像被剪為元素的大小，但它們可以縮放 (使用round) 或均勻地分佈 (使用space)。

此屬性從原始影像開始重複，原始影像由background-image定義，並根據background-position的值放置。

在這個屬性中一共有四個屬性值，分別是repeat，repeat-x，repeat-y和no -repeat。其中，repeat代表背景影像將在垂直方向和水平方向重複；repeat-x代表背景影像將在水平方向重複；repeat-y代表背景影像將在垂直方向重複；no-repeat代表背景影像不重複，只出現一次。

推薦學習：css影片教學

以上是如何使用css設定背景圖的重複與否的詳細內容。更多資訊請關注PHP中文網其他相關文章！