css設置背景色和背景圖片

時間 2020-05-20

標籤 css 設置背景圖片欄目 CSS 简体版

原文原文鏈接

用css設置背景色和背景圖片：css

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

設置爲背景色是藍色，而後添加了一張背景圖，效果：html

默認背景圖鋪滿了整個頁面，那麼更改一下，讓圖片向X軸也就是水平方向平鋪過去咱們加一個屬性：ide

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:repeat-x;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

出現的是這樣的一個效果：性能

那麼咱們要讓圖片縱向平鋪怎麼辦呢，直接將background-repeat:repeat-x;更改爲background-repeat:repeat-y;就能夠了，來看下效果：url

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:repeat-y;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

那麼咱們不要讓圖片平鋪只要一張圖片怎麼辦呢，background-repeat:repeat-x;橫向平鋪background-repeat:repeat-y;縱向平鋪那麼不平鋪就是background-repeat:no-repeat;：htm

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:no-repeat;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

效果：blog

再來看一個屬性background-p_w_upload:fixed;這個屬性能讓圖片固定住：圖片

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   body{

    background-color:blue;

    background-p_w_picpath:url(F:\ss.jpg);

    background-repeat:no-repeat;

    background-p_w_upload:fixed;

   }

  </style>

 </head>

 <body>

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

 </body>

</html>

添加上屬性，再用<br />來讓頁面滾動條出現，這樣更能看出效果：utf-8

注意右側滾動條往下拉圖片仍是在左上角不動get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。