一个人的视频在线观看www,久久夜色精品国产噜噜麻豆,污污内射久久一区二区欧美日韩

如何使用css設(shè)置背景圖的重復(fù)與否

醉折花枝作酒籌

發(fā)布： 2021-08-13 14:29:34

原創(chuàng)

3053人瀏覽過

上一篇文章中我們了解了定位元素背景圖像的方法，請(qǐng)看《一招搞定css定位元素的背景圖像》。這次我們來了解一下設(shè)置背景圖重復(fù)的方法，有需要的可以參考參考。

當(dāng)我們有一張背景圖的時(shí)候，如何設(shè)置這個(gè)背景圖的平鋪方式呢？

先來看一個(gè)小栗子，就拿上篇文章的代碼吧。

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
<p>為了顯示，表明這個(gè)一個(gè)p元素</p>
</div>
</body>

登錄后復(fù)制

這個(gè)結(jié)果是

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

我們可以看到，這個(gè)小例子中的背景圖一直都是這張，但是圖片出現(xiàn)的次數(shù)發(fā)生了改變，這是什么原因呢？可以看到，我們修改了background-repeat這個(gè)屬性的值，今天我們就來說一下這個(gè)屬性。

降重鳥

要想效果好，就用降重鳥。AI改寫智能降低AIGC率和重復(fù)率。

113

查看詳情

background-repeat屬性設(shè)置是否及如何重復(fù)背景圖像。背景圖像可以沿著水平軸，垂直軸，兩個(gè)軸重復(fù)，或者根本不重復(fù)。默認(rèn)地，背景圖像在水平和垂直方向上重復(fù)。重復(fù)的圖像被剪裁為元素的大小，但它們可以縮放 (使用round) 或者均勻地分布?(使用space)。

該屬性從原圖像開始重復(fù)，原圖像由background-image定義，并根據(jù)background-position的值放置。

在這個(gè)屬性中一共有四個(gè)屬性值，分別是repeat，repeat-x，repeat-y和no-repeat。其中，repeat代表背景圖像將在垂直方向和水平方向重復(fù)；repeat-x代表背景圖像將在水平方向重復(fù)；repeat-y代表背景圖像將在垂直方向重復(fù)；no-repeat代表背景圖像不重復(fù)，只出現(xiàn)一次。

推薦學(xué)習(xí)：css視頻教程

以上就是如何使用css設(shè)置背景圖的重復(fù)與否的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：

css