3.4背景图片位置

最新推荐文章于 2024-07-06 16:25:37 发布

这一片月

最新推荐文章于 2024-07-06 16:25:37 发布

阅读量125

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/qq_62865634/article/details/126687604

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

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

1、语法：

div{

background-position："x ,y";

}

length 百分数1由浮动数字

注意：

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

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

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

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

自己代码展示：

<!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>
        div {
            width: 300px;
            /* 设置它的宽度 */
            height: 300px;
            /* 设置它的高度 */
            background-color: pink;
            /* 设置它的颜色背景相当于颜色填充 */
            background-image: url(img.png);
            /* 设置它的图片背景两个值：
            一个是：none表示没有值
            另一个：url表示有值、里面放图片的（相对路径和绝对路径） */
            background-repeat: no-repeat;
            /* 这里设置平铺背景四种值：
            第一个：repeat表示平铺
            第二个：no-repeat表示不平铺
            第三个：repeat-x表示平铺x坐标
            第四个：repeat-y表示平铺y坐标 */
            background-position: center top;
            /* 这里设置方向图片背景： */
            /* 注意:如果我们设置一个值、则另一个值可以忽略、因为另一个默认是垂直 */
            /* 五个方向：
            上：top
            解释：这个上是靠y坐标、所以x坐标是我们可以用垂直来使用
            下：botton
            解释：这个上是靠y坐标
            左:left
            解释：这个是靠这x坐标
            右：right
            垂直或叫居中：centter */
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

显示结果：