2019-04-22 背景图片

背景图片

取值

<!--
        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    背景图片固定,不会随着文档的滚动而滚动
    -->

样式

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

推荐阅读更多精彩内容

  • 背景图片 .dv1{width:1200px;height:600px;border:1px solid #00...
    IT笔记阅读 1,878评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,813评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,844评论 0 11
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 5,451评论 0 0