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

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

創(chuàng)新互聯(lián)公司專注于洮北企業(yè)網(wǎng)站建設(shè),響應式網(wǎng)站建設(shè),商城網(wǎng)站開發(fā)。洮北網(wǎng)站建設(shè)公司,為洮北等地區(qū)提供建站服務。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

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

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

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

屬性值：

repeat：沿水平豎直兩個方向平鋪，這也是默認值

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

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

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

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

示例：

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è)置圖片不平鋪，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標題：怎么在css中設(shè)置圖片不平鋪
網(wǎng)頁地址：http://www.chinadenli.net/article30/pejcpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、虛擬主機、電子商務、定制開發(fā)、手機網(wǎng)站建設(shè)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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