淘先锋技术网

首页 1 2 3 4 5 6 7

html零基础必看——html入门,编程就是如此简单

1.什么是背景?

背景:渲染浏览器元素背景层 , background属性用于设置盒子的背景颜色或者背景图片效果等。

  • 背景是在内容层的下方,背景与内容的层叠关系3D示意图:
    在这里插入图片描述

2.background-color 背景颜色

属性值,可参考上章颜色取值法

3.background-image 背景图片

属性值:

  • none 默认值,不插入背景图片
  • url (“写入路径”) 可用相对路径引入和网络路径引入。
    注意:选的背景图片可尺寸比较小的,不然看不出来默认平铺方式。

4.background-repeat 背景图片平铺方式

属性值:

  • repeat 默认是背景图片平铺的
  • no-repeat 不平铺
  • no-repeat 不平铺
  • repeat-x 水平方向平铺(左右)
  • repeat-y 垂直方向平铺(上下)
<style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 背景色是默认会延伸到边框的下方  */
            background-color: skyblue;
        }
        .div2,.div3,.div4,.div5,.div6{
            /* 为了便于观察,使几个div变成行内块元素 */
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;

            /* background-image 背景图片 
            属性值:
            none 默认值,不插入背景图片
            url ("写入路径") 可用相对路径引入和网络路径引入。
            选的背景图片可尺寸比较小的,不然看不出来默认平铺方式  */
            background-image: url(./img/5.jpg);
        }

        
        /* background-repeat 背景图片平铺方式 */
        .div3{
            /* repeat 默认是背景图片平铺的 */
            background-repeat: repeat;
        }
        .div4{
            /* no-repeat 不平铺 */
            background-repeat: no-repeat;
        }
        .div5{
            /* repeat-x 水平方向平铺(左右) */
            background-repeat: repeat-x;
        }
        .div6{
            /* repeat-y 垂直方向平铺(上下) */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
</body>

效果图:
在这里插入图片描述

5.背景图片大小

属性值:

  • 分别设置宽高 给数值,或百分比。如,background-size: 100px 100px;分别设置宽高 给数值,或百分比
  • cover 等比例缩放直到铺满X轴和Y轴
  • contain 等比例缩放直到铺满X或Y轴其中一个(用的比较少)
<title>背景图片大小</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        div{
            display: inline-block;
            border: 1px solid red;
            background-image: url(./img/2.jpg);   
        }
        .div1,.div2{
            width: 300px;
            height: 300px;
        }
        .div3,.div4{
            width: 500px;
            height: 500px;
        }

        /* background-size背景图片大小  */
        /* .div1{}原始背景不作改变 */
        .div2{
            /* 分别设置宽高 给数值,或百分比,*/
            background-size: 100px 100px;
        }
        .div3{
            /* cover 等比例缩放直到铺满X轴和Y轴; */
            background-size: cover;
        }
        .div4{
            /* contain 等比例缩放直到铺满X或Y轴其中一个; */
            background-size: contain;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

效果图:
在这里插入图片描述

6.背景图片位置

属性值:

background-position:X Y; X和Y默认是:0 0。默认是位于左上方

  • x允许取值的方式:left左对齐 center水平居中 right右对齐;百分比,px
  • Y允许的取值方式:top顶部对齐 center垂直居中 bottom底部对齐;百分比,px
  • 如果只给一个值,那么第二个值默认center(50%)
    X轴的值和Y轴的值如果给的是方位(单词)值,可以交换顺序。
<head>
    <title>背景图片位置</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        div {
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background-image: url(./img/2.jpg);
            /* 引入背景图片后,设置背景图片大小,不平铺,用以观察背景图片位置 */
            background-size: 100px;
            background-repeat: no-repeat;
        }

        /*background-position 背景图片位置 */
        /* .div1{}不作设置,默认是位于左上角 */

        /* background-position:X Y; X和Y默认是:0 0
            x允许取值的方式:left左对齐  center水平居中 right右对齐;百分比,px
            Y允许的取值方式:top顶部对齐 center垂直居中 bottom底部对齐;百分比,px
            如果只给一个值,那么第二个值默认center(50%);
            X轴的值和Y轴的值如果给的是方位(单词)值,可以交换顺序。
            */
        .div2 {
            /* background-position: 100px 50px; */
            /* background-position: 100px bottom; */
            background-position: right top;
        }

        .div3 {
            /* 如果只给一个值,那么第二个值默认center(50%) */
            /* background-position: 100px; */
            /* background-position: center; */

            /* 背景位置的拆分写法  */
            /* 水平背景的位置 */
            background-position-x: 100px;
            /* 垂直背景位置 */
            background-position-y: 0px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

效果图:
在这里插入图片描述

7.background-attachment 背景图像固定

  • background-attachment: fixed 背景不随滚动而滚动
  • background-attachment:scroll; 默认值,背景随滚动而滚动
<head>
    <title>背景图像固定</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        body {
            background-image: url(./img/2.jpg);
            /* 让背景图充满整个屏幕 */
            background-size: cover;

            /* background-attachment: fixed 背景不随滚动而滚动
            background-attachment:scroll; 默认值,背景随滚动而滚动; */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>

</body>

8.背景图片和img标签对比

  • 背景图片不占用content内容部分,而img标签会占用。
  • 背景图片大小如果超出盒子是不会显示的,而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片,何时使用img标签并没有一个确却的标准规定,可以根据实际情况做选择。

  • 如果为了给盒子加底色为内容部分加背景,或者是加一些小图标项目符号等,则使用背景图片。
  • 如果是确却的想表达一个图片信息,也希望搜索引擎能检索到对应的图片信息,则使用img标签。

总结

上述是本章小编为大家整理的背景属性,特别是背景图片相关属性进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的,或有不确之处和疏漏的地方,还望各位大佬能够不吝赐教,加以斧正,小编在此先行谢过了。