如何使用HTML写网页的背景

HYYY77

于 2024-06-12 13:48:24 发布

阅读量835

点赞数 9

文章标签： html css css3

本文链接：https://blog.csdn.net/HYYY77/article/details/139624570

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>背景</title>
       <style type="text/css">
           /* 设置图片在整个网页里面 */
           body{
           /*    background-image: url(img/推荐2.webp);
               background-repeat: no-repeat;
               background-attachment: fixed; /* 固定在网页上 (定位)*/
               /* background-size: 400px 400px;
               background-position: right bottom; */ /*图片的位置 */
               /* 复合写法 */
               background: gainsboro url(img/推荐2.webp) no-repeat fixed center/100%;
           }
           .box{
               width: 300px;
               height: 300px;
               border: 1px solid pink;
               background-color: hotpink;
               /* background-color:rgba(255,0,0,1) */
           }
           .box2{
               width: 200px;
               height: 200px;
               background-color:transparent; /*透明色 */
               float: left;
           }
           .bg{
               width: 300px;
               height: 300px;
               border: 1px solid red;
               /* background-image:url(img/推荐2.webp) ;背景图片 */
               /* 背景图片重复显示使用：
               1.no-repeat:不重复
               2.repeat:重复
               3.repeat-x:左右方位重复
               4.repeat-y:上下方位重复
               */
               background-repeat: no-repeat;

           }
       </style>
   </head>
   <body>
       <div class="box"></div>
       
       <div class="bg"></div>
   </body>
</html>