溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在css中設(shè)置圖片不平鋪

發(fā)布時(shí)間：2021-04-02 15:28:45 來源：億速云 閱讀：224 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么在css中設(shè)置圖片不平鋪，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

css設(shè)置圖片不平鋪的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在style標(biāo)簽中添加“background:url(img/3.jpg)no-repeat;}”來設(shè)置圖片不平鋪即可。

css的background-repeat 屬性定義了圖像的平鋪模式。從原圖像開始重復(fù)，原圖像由 background-image 定義，并根據(jù) background-position 的值放置。

css可以使用background-repeat屬性設(shè)置圖片不平鋪。

屬性值：

repeat：沿水平豎直兩個(gè)方向平鋪，這也是默認(rèn)值

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿水平方向平鋪

repeat-y：只沿豎直方向平鋪

背景圖像的位置是根據(jù) background-position 屬性設(shè)置的。如果未規(guī)定 background-position 屬性，圖像會(huì)被放置在元素的左上角。

示例：

1、未設(shè)置平鋪方式

<body>
<style>
.box{ border:1px solid #093; width:800px; height:800px;
background:url(img/3.jpg);}
</style>
<div class="box">
hello word
</div>
</body>

效果圖：

怎么在css中設(shè)置圖片不平鋪

2、設(shè)置圖片不平鋪

<body>
<style>
.box{ border:1px solid #093; width:800px; height:800px;
background:url(img/3.jpg)no-repeat;}
</style>
<div class="box">
hello word
</div>
</body>

效果圖：

怎么在css中設(shè)置圖片不平鋪

上述內(nèi)容就是怎么在css中設(shè)置圖片不平鋪，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手