背景图片设置

comegoing-归去兮来

已于 2023-12-06 15:52:02 修改

阅读量440

点赞数 1

分类专栏：前端css基础文章标签： css css3 前端

于 2022-08-11 12:08:57 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/126280936

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、背景贴图方式

二、重复效果（background-repeat）

三、图片位置

1、像素方式

2、九宫格方式

四、图片大小（“重要”background-size）

五、图片偏移位置原点（background-origin）

六、背景图裁剪显示方式（background-clip）

七、代码

一、背景贴图方式

通过url贴链接，最好加上双引号

background-image: url("../src/milk.jpg");

二、重复效果（background-repeat）

（1）no-repeat

（2）repeat-x，沿x轴方向重复

（3）repeat-y，沿y轴方向重复

（4）repeat默认值，铺满整个区域

三、图片位置

1、像素方式

两个参数，以像素作为x，y轴的标尺

2、九宫格方式

（1）两个参数，可选值有center，left，right等，top、right就表示右上角

（2）一个参数，可选值与上面相同

四、图片大小（“重要”background-size）

（1）以像素或者比例的方式设置

（2）第一个值表示宽度，第二个值表示高度

（3）如果只写一个，则第二个值默认是auto

（4）可以通过background-size：100% atuo的方式来填充内容，这样会按照原图片比例缩放

（5）可以直接用contain的方式自动匹配大小，且不会超出边距

注意：一般设置背景图后，要设置图片大小，因为背景图片的大小可能会比自己设置的背景大小更大，如果图片周围存在透明效果，而图片内容在偏中间的位置，就可能导致图片不显示

五、图片偏移位置原点（background-origin）

（1）默认值是padding-box

（2）conten-box表示背景图片偏移量从内容区开始计算

（3）border-box表示背景图片偏移量从边框区开始计算

六、背景图裁剪显示方式（background-clip）

（1）border-box默认值，背景会出现在边框下方

（2）padding-box背景不会出现在边框，出现在内容区和内边距

（3）content-box背景只出现在内容区域

七、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .box1{
            /* 通过url贴链接，最好加上双引号*/
            background-image: url("../src/milk.jpg");
            width: 400px;
            height: 200px;
            background-color: #bfa;
            background-repeat:no-repeat;
            background-position: 50px 50px;
            background-size: 100% auto;
            border: red 10px double;
            background-clip: content-box;
            

            /* 
            repeat:
            1.no-repeat
            2.repeat-x
            3.repeat-y
            4.repeat

            background-position:
            1.像素（x，y）
            2.center，left等，九宫格

            background-size(设置背景图片的大小)：
            1.第一个值表示宽度
            2.第二个值表示高度
            3.如果只写一个，则第二个值默认是auto
            4.可以通过
            background-size：100% atuo的方式来填充
            
            background-origin（设置图片偏移的坐标原点）：
            1.默认值是padding-box
            2.conten-box表示背景图片偏移量从内容区开始计算
            3.border-box表示背景图片偏移量从边框区开始计算

            background-clip(设置背景图裁剪显示方式)：
            1.border-box默认值，背景会出现在边框下方
            2.padding-box背景不会出现在边框，出现在内容区和内边距
            3.content-box背景只出现在内容区域
            */
            overflow: scroll;
        }
        .box2{
            background-image: url("../src/tea.jpg");
            background-size: 100% auto;
            background-repeat: no-repeat;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, earum iste odio harum corporis asperiores ducimus deleniti culpa voluptatum minima ea possimus esse maxime autem consequuntur aut quos quis nobis.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, animi temporibus facilis ad adipisci eius obcaecati molestias at aperiam eos, suscipit nostrum sint molestiae, ex quos magnam reprehenderit officia veniam.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis atque aspernatur aut illo natus consequuntur voluptatibus quod aperiam vitae pariatur culpa sed repudiandae repellat earum iste, esse quia ipsum facere!
        </div>
    </div>
</body>
</html>