• 3.4背景图片位置

    提示：利用background-position属性改变图片中的位置。

    1、语法：

                  div{

                       background-position："x ,y";

                       }

    length             百分数1由浮动数字

    position           top|center|bottom|left|center|right

    注意：

           这里“x”、“y”坐标，也可以使用方位名词和精确单位。

    （1）、指定两个方向值方位名词，则值的先后顺序无关，比如：

            left 左边 top 上、top上 left下一致结果

    （2）、如果指定了一个方位名，另一个可以值省略，也可以值默认居中对齐center

    自己代码展示：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>背景图片位置、上、下、左、右title>
    9.     <style>
    10.         div {
    11.             width: 300px;
    12.             /* 设置它的宽度 */
    13.             height: 300px;
    14.             /* 设置它的高度 */
    15.             background-color: pink;
    16.             /* 设置它的颜色背景相当于颜色填充 */
    17.             background-image: url(img.png);
    18.             /* 设置它的图片背景两个值：
    19.             一个是：none表示没有值
    20.             另一个：url表示有值、里面放图片的（相对路径和绝对路径） */
    21.             background-repeat: no-repeat;
    22.             /* 这里设置平铺背景四种值：
    23.             第一个：repeat表示平铺
    24.             第二个：no-repeat表示不平铺
    25.             第三个：repeat-x表示平铺x坐标
    26.             第四个：repeat-y表示平铺y坐标 */
    27.             background-position: center top;
    28.             /* 这里设置方向图片背景： */
    29.             /* 注意:如果我们设置一个值、则另一个值可以忽略、因为另一个默认是垂直 */
    30.             /* 五个方向：
    31.             上：top
    32.             解释：这个上是靠y坐标、所以x坐标是我们可以用垂直来使用
    33.             下：botton
    34.             解释：这个上是靠y坐标
    35.             左:left
    36.             解释：这个是靠这x坐标
    37.             右：right
    38.             垂直或叫居中：centter */
    39.         }
    40.     style>
    41. head>
    42.  
    43. <body>
    44.     <div>div>
    45.  
    46. body>
    47.  
    48. html>

    显示结果：

     

    总结

    提示：这里对文章进行总结：
    例如：以上就是今天要讲的内容，本文仅仅简单介绍了利用background-position属性改变图片中的位置。

  • 相关阅读:
    阿里云国际版云服务器Linux系统数据恢复操作步骤
    Media Encoder 2024 for Mac媒体编码器安装教程ME2024安装包下载
    rsync 远程数据同步
    查找算法【哈希表】 - 简介
    【Rust笔记】浅聊 Rust 程序内存布局
    Java学习--学生管理系统(残破版)
    快领这500万？成都市生物医药产业发展专项政策的申报范围、条件和材料
    基于SSH开发酒店管理系统
    mpu6050移植DMP库
    nginx代理本地服务请求，避免跨域；前端图片压缩并上传
  • 原文地址：https://blog.csdn.net/qq_62865634/article/details/126687604