2019-04-22背景图片的设置

<html>
<head>
<meta charset="utf-8"/>
<title>背景图片</title>
<style>
.dv1{
width:1200px;
height:600px;
border:1px solid #000;
margin:20px auto;
/添加背景图片/
background-image:url(images/team1.jpg);
/不让背景图片重复/
background-repeat:no-repeat;/
不重复/
/
在x轴重复/
/
background-repeat:repeat-x; //在x轴重复/
/
在y轴重复/
/
background-repeat:repeat-y; //在x轴重复*/

            /**改变背景图片的尺寸*/
            /* background-size: 
            
                  value1(宽)  value2(高); 
                  value1%       value2%
                  cover   覆盖   将背景图片等比例缩放直到背景图片能覆盖元素的所有区域
            */
           
           /*background-size:1200px 600px;*/
           background-size:contain;
           background-attachment:fixed;

           /*背景图的固定
           background-attachment:

              取值:
                  scroll   默认值,会随着文档的滚动而滚动
                  fixed    背景图片固定,不会随着文档的滚动而滚动
                  */

        }


    </style>
</head>
<body>
<!--
    background-image:url(路径);引入背景图片
    background-repeat:  背景重复
       取值:
          no-repeat  不重复
          repeat-x   在x轴方向重复
          repeat-y   在y轴方向重复
          repeat     默认值 重复
   
   background-size:  背景图片的大小

       取值:
           value1(宽度)   value2(高)
           value1%(宽度)   value2%(高)
           cover  覆盖  将背景图片等比例缩放直到背景图片能覆盖元素的所有区域
           contain 包含 将背景图片等比例缩放,直到背景图片碰到右边或下边的时候停止缩放

  background-attachment: 背景图片固定
          取值:
              scroll    默认值,会随着文档的滚动而滚动   
              fixed    背景图片固定,不会随着文档的滚动而滚动
-->
    <div class='dv1'>
       <p>dffdgggffghgn</p>
    </div>
    <div class='dv2'></div>
    <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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容