首頁 > 文章 > web前端 > css怎麼設定背景居中不平鋪

css怎麼設定背景居中不平鋪

WBOY原創: 2022-04-20 17:29:002768瀏覽

在css中，可以利用「background:url(路徑) no-repeat center;」設定背景居中不平鋪，background屬性用於設定元素的背景樣式，「no-repeat」用來表示背景不平鋪，center用來表示背景居中。

css怎麼設定背景居中不平鋪

本教學操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css怎麼設定背景居中不平鋪

利用background屬性即可。

背景縮寫屬性可以在一個宣告中設定所有的背景屬性。

各值之間以空格分隔，不分先後順序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允許的。

可以設定的屬性分別是：

background-color 指定要使用的背景顏色
background-position 指定背景影像的位置
background-size 指定背景圖片的大小
background-repeat 指定如何重複背景影像#

css怎麼設定背景居中不平鋪

11-# -#_back_back#_ attachment 設定背景圖像是否固定或隨著頁面的其餘部分滾動。

#########background-image 指定要使用的一個或多個背景影像 ############範例如下：#######

<html>
<head>
<style type="text/css">
body
{ 
background: url(/i/eg_bg_03.gif) no-repeat center; 
}
</style>
</head>
<body>
<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>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

###輸出結果：###############（學習影片分享：###css影片教學###）###

以上是css怎麼設定背景居中不平鋪的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 position background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery怎麼改變div的class下一篇：jquery怎麼改變div的class

看更多