• 背景图片设置

    目录

    一、背景贴图方式

    二、重复效果（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的方式来填充内容，这样会按照原图片比例缩放

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

    （1）默认值是padding-box

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

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

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

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

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

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

    七、代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>背景title>
    8.     <style>
    9.         .box1{
    10.             /* 通过url贴链接，最好加上双引号*/
    11.             background-image: url("../src/milk.jpg");
    12.             width: 400px;
    13.             height: 200px;
    14.             background-color: #bfa;
    15.             background-repeat:no-repeat;
    16.             background-position: 50px 50px;
    17.             background-size: 100% auto;
    18.             border: red 10px double;
    19.             background-clip: content-box;
    20.             
    21.  
    22.             /* 
    23.             repeat:
    24.             1.no-repeat
    25.             2.repeat-x
    26.             3.repeat-y
    27.             4.repeat
    29.             background-position:
    30.             1.像素（x，y）
    31.             2.center，left等，九宫格
    33.             background-size(设置背景图片的大小)：
    34.             1.第一个值表示宽度
    35.             2.第二个值表示高度
    36.             3.如果只写一个，则第二个值默认是auto
    37.             4.可以通过
    38.             background-size：100% atuo的方式来填充
    39.             
    40.             background-origin（设置图片偏移的坐标原点）：
    41.             1.默认值是padding-box
    42.             2.conten-box表示背景图片偏移量从内容区开始计算
    43.             3.border-box表示背景图片偏移量从边框区开始计算
    45.             background-clip(设置背景图裁剪显示方式)：
    46.             1.border-box默认值，背景会出现在边框下方
    47.             2.padding-box背景不会出现在边框，出现在内容区和内边距
    48.             3.content-box背景只出现在内容区域
    49.             */
    50.             overflow: scroll;
    51.         }
    52.         .box2{
    53.             background-image: url("../src/tea.jpg");
    54.             background-size: 100% auto;
    55.             background-repeat: no-repeat;
    56.             height: 1000px;
    57.         }
    58.     style>
    59. head>
    60. <body>
    61.     <div class="box1">
    62.         <div class="box2">
    63.             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.
    64.             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.
    65.             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!
    66.         div>
    67.     div>
    68. body>
    69. html>

  • 相关阅读:
    docker应用部署---Tomcat的部署配置
    I2C总线原理及总线信号的实现
    双端口USB Type-C控制器 CYPD6227 (CYPD6227-96BZXI)
    Java自学（三）面向对象编程
    Notepad++下载安装
    时间序列分析2--时间序列数据的处理和绘制时序图
    提升有限元分析核心能力，这三类概念思维不可或缺
    力扣每日一题48：旋转图像
    分享9个已开源的GPT4平替，用过感觉还不错
    STL map的几种赋值方式
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126280936