2.1背景位置——精确单位

最新推荐文章于 2024-07-05 14:51:32 发布

这一片月

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量138

点赞数

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

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

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：背景位置精确单位。

1、语法：

div{

background-image：url（图片位置）；

background-position：20px 50px;

}

background-image：url（）

两个属性值： none

url

background-position：20px 50px；

第一个值表示x轴为20像素

第二个值表示y轴为50像素

background-position：20px；

只写一个值，则另一个一定默认为居中

自己代码展示：

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-06 14:50:43
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-09-04 13:29:08
 * @FilePath: \code\前端代码\css学习知识\css背景\2.1背景位置——精确单位.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
        body {
            background-image: url(wzbj.jpg);
            /* 图片背景 */
            background-repeat: no-repeat;
            /* 平铺背景-属性值表示不要平铺 */
            background-position: 20px 50px;
            /* 这个表示图片精确位置；两个值是表示精确、x轴20px、y轴50px */
            /* 这个50像素（px）表示上向下顶 */
        }
    </style>
</head>

<body>


</body>

</html>

显示结果：