• <blockquote id="opgzb"><th id="opgzb"></th></blockquote>
  • <track id="opgzb"></track>
      <table id="opgzb"></table>
    1. <optgroup id="opgzb"><menu id="opgzb"><pre id="opgzb"></pre></menu></optgroup>

              HTML如何設置背景圖片?有幾種設置背景圖片的辦法?

              猿友 2021-03-11 09:47:09 瀏覽數 (53034)
              反饋

              我們在編輯網頁時,如果覺得網頁過于單調,這時便可以加上一張自己喜歡的背景圖。這篇文章中,W3Cschool 小編給大家介紹下 HTML 中如何設置背景圖片,分別有哪幾種設置背景圖片的方法。

              方法一、HTML中設置背景圖片

              HTML中的<body></body>標簽內可直接設置背景圖片。具體代碼如下:

              <body background="圖片路徑">

              效果展示:

              backgroundimage

              直接用<body></body>設置背景圖片的話,瀏覽器會根據你圖片的大小,鋪滿整個屏幕。若不想平鋪圖片,還需要進行另外的 CSS 設置。此方法較為麻煩。

              方法二:CSS 設置背景圖片

              CSS 設置背景圖片的方式與 HTML 設置背景圖片的方式大體一致,具體代碼如下:

              <style type="text/css">
                  body{
              	    background: url("圖片地址");             
              	}
              </style>

              到目前為止,圖片還是會重復鋪滿整個屏幕。

              我們需要在進行添加 CSS 樣式進行優化。

              <style type="text/css">
              	body{
              		background: url("圖片地址") no-repeat center center fixed;
                              /*兼容瀏覽器版本*/
                              -webkit-background-size: cover;
                              -o-background-size: cover;                
                              background-size: cover;
              	}
              	</style>

              最終效果如下:

              bgimg

              以上就是 W3Cschool 小編整理的 HTML 如何設置背景圖片以及方法介紹。

              1 人點贊

              99在线精品国自产拍不卡_国产 日产 欧美最新_久久综合网丁香五月_嘟嘟韩剧网_卫生间开车视频疼痛有声音