• 背景图片设置

    目录

    一、背景贴图方式

    二、重复效果（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>

  • 相关阅读:
    关于在Linux服务上安装nvm，踩坑步骤说明
    vue3 接入网易易盾
    c# 串口调试助手
    java-php-python-ssm医药网络挂号系统计算机毕业设计
    spring cloud之配置中心
    实战：如何优雅的从 Skywalking 切换到 OpenTelemetry
    设计模式：适配器模式
    atguigu8 集群
    易观千帆 | 2022年10月银行APP月活跃用户规模盘点
    Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126280936