淘先锋技术网

首页 1 2 3 4 5 6 7

CSS背景图片常见相关属性详解

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标签。

总结

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