简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS中關於background樣式repeat與no-repeat的範例程式碼

黄舟
發布： 2017-07-27 13:18:43
原創
3886 人瀏覽過

CSS中關於background樣式repeat與no-repeat的範例程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>New Document</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
        div{
            width:400px; 
            height:200px;
            padding:8px; 
            border:1px solid #96c2f1;
        }
    </style>
</head>
<body>
    <div style="width:200px; height:100px; border: 1px solid #ff0000;">
    </div>
     
    <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
        <img alt="pic" src="zf.jpg">
    </div>
     
    <div style="background:url(zf.jpg);">
    </div>
     
    <div style="background:repeat-x url(zf.jpg);">
        1.repeat-x url(zf.jpg);
    </div>
     
    <div style="background:repeat-y url(zf.jpg);">
        2.repeat-y url(zf.jpg);
    </div>
     
    <div style="background:repeat-x 0px 50px url(zf.jpg);">
        3.repeat-x 0px 50px url(zf.jpg);
    </div>
     
    <div style="background:repeat 25px 25px url(zf.jpg);">
        4.repeat 25px 25px url(zf.jpg);
    </div>
     
    <div style="background:repeat-x bottom url(zf.jpg);">
        5.repeat-x bottom url(zf.jpg);
    </div>
     
    <div style="background:repeat-x left url(zf.jpg);">
        6.repeat-x left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat url(zf.jpg);">
        7.no-repeat url(zf.jpg);
    </div>
     
    <div style="background:no-repeat top  url(zf.jpg);">
        8.no-repeat top url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left url(zf.jpg);">
        9.no-repeat left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left 100px url(zf.jpg);">
        10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat right 100px url(zf.jpg);">
        11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat 100px bottom url(zf.jpg);">
        12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
    </div>
     
    <div style="background:no-repeat -50px 50px url(zf.jpg);">
        13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px
    </div>
     
    <div style="background:no-repeat -50px  url(zf.jpg);">
        14.no-repeat -50px 距离左边-50px，上下默认，居中
    </div>
     
    <div style="background:no-repeat -50px  top url(zf.jpg);">
        15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)
    </div>
     
    <div style="background:no-repeat left  top url(zf.jpg);">
        16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat
    </div>
</body>
</html>
登入後複製

 

以上是CSS中關於background樣式repeat與no-repeat的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
background
來源：php.cn
上一篇：CSS中關於!important重要性的詳細介紹 下一篇：css偽類中關於visited樣式無效的解決方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
掌握scss風格中Quasar變數的使用 我透過vueaddquasar配置了一個Vue3+Quasar專案。我無法理解如何使用quasarsass/scss變數。來自我預計使用的文件<stylelang="...
來自於 2023-11-04 21:05:29
0
1
304
將 CSS 精靈縮放為背景圖片：指南 .my-sprite{background-image:url("https://i.stack.imgur.com/lJpW8.png");height:10...
來自於 2023-11-02 10:39:28
0
2
288
為什麼高度 100% 在沒有 DOCTYPE 聲明的情況下起作用？ 這是完整的程式碼：<!DOCTYPEHTML><html><bodystyle="height:100%;padding:0;margin:...
來自於 2023-10-26 10:39:42
1
2
209
在Safari中如何使用CSS在圓形<button>上獲得圓形輪廓 我試圖獲得一個具有相同顏色輪廓的圓形按鈕，但這似乎不可能。輪廓最終總是呈現正方形。有沒有一種方法可以用a來實現這一點，或者它可能只能用a來實現？ button{width:40px...
來自於 2023-10-26 09:54:54
0
2
604
如何讓最後一行的項目佔用CSS Grid中的剩餘空間？ 有沒有辦法強制網格最後一行中的所有項目填充該行，無論它們有多少？我不知道網格中的項目數量，因此無法直接定位它們。我嘗試使用grid-auto-flow:ensemble，但它並沒有...
來自於 2023-10-20 20:39:37
0
1
321
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！