CSS背景定位

web世界之窗

于 2019-12-19 15:19:44 发布

阅读量172

点赞数

文章标签： css 前端 web前端前端开发前端基础

本文链接：https://blog.csdn.net/weixin_45974707/article/details/103615007

版权

本文介绍了CSS中的背景定位属性background-position，用于控制背景图片的位置。该属性可设置为left, center, right等值来调整水平位置，top, center, bottom等值调整垂直位置，也可使用像素值设定精确位置。背景图片的合理使用可以避免滚动条，提升网页显示效果。" 118778061,10545180,计算机组成原理实验：运算器的算术逻辑运算实践,"['计算机组成原理', '运算器实验', '逻辑运算']

摘要由CSDN通过智能技术生成

一、背景定位

同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色

1.在CSS中有一个叫做background-position：属性，就是专门用来控制背景图片的位置

2.格式：background-position:值1 值2；

值1的取值范围：left center right

值1代表背景图片的水平位置

值2的取值范围：top center bottom

值2代表背景图片的垂直位置

值1和值2也可以设置像素值，来分别表示距离最左边和最上边的像素值(注意可以接受负值，也就是左上角就是坐标的原点，图片的左上角就是坐标值的大小)，记住一定要带单位。默认值为：left top

例子：

  <style>

        .box{

            height: 1000px;

            width: 1000px;

            background-image: url("image/snow.jpg");

            background-repeat: no-repeat;

            background-position: center center;

        }

</style>

</head>

<body>

<div class="box">

</div>
学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划