css background控制背景图像的位置

本文深入解析CSS背景属性的语法,包括背景色、图像路径、重复模式、坐标定位等内容,并通过实例演示如何精确控制背景图像的位置,特别强调使用百分比单位的便利性。


background的语法是 :    background:背景色  url(图像路径)  是否重复   横向坐标   纵向坐标

        其中坐标可以控制背景图像的位置,坐标的原点是元素的左上角,其单位可以是像素和百分比。若单位是百分比,横向坐标是以元素本身的宽度减去图像的宽度为基准,纵向坐标是以元素本身的高度减去图像的高度为基准。

例如:

      div {border:1pxsolidred;width:400px;height:400px;background:#00FF00url("0.jpg") no-repeat   50%   50%;}

       0.jpg图像宽为200px,高度为200px,则背景图像在div中显示的位置是  横坐标为: ( 400-200)*0.5=100px,纵坐标是:(400-200)*0.5=100px,背景图像就会在元素的水平居中和垂直位置居中显示。

      上面的css的效果等价于

 div {border:1pxsolidred;width:400px;height:400px;background:#00FF00url("0.jpg") no-repeat   100px  100px;}



用%的好处是,可以不用费脑计算具体的像素值了

使用CSSbackground属性设置背景图片,可按以下方式操作: 可以按顺序设置如下属性(可点击进入相应的CSS手册查看使用):`background-color`(背景颜色)、`background-image`(背景图片)、`background-repeat`(背景重复)、`background-attachment`(背景图片是固定还是滚动)、`background-position`(背景图片的定位)[^1]。 各属性具体设置方法如下: - `background-image`:用于设置背景图片的URL,在`url()`中写出图片路径,就可以给元素(如div盒子)设置一个背景图片。不过,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示[^1][^2][^3]。 - `background-size`:设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 "cover"(填充整个容器)或 "contain"(完整显示图片)[^2]。 - `background-repeat`:设置背景图片是否重复。可以设置为 "repeat"(重复)、"no-repeat"(不重复)、"repeat-x"(横向重复)或 "repeat-y"(纵向重复)[^1][^2]。 - `background-attachment`:设置背景图片是固定还是滚动。当背景图片设置在已经设置为`overflow:scroll`的元素中时,即`overflow:scroll`和`background-attachment:scroll`同时存在,里面的背景图片不会随页面滚动也不会随容器上下滚动[^1][^4]。 - `background-position`:设置背景图片的位置。可以设置为绝对像素值,也可以设置为百分比或关键字(如 "center"、"top"、"bottom"、"left" 或 "right")[^1][^2]。 以下是一个示例代码: ```css div { background-color: #f0f0f0; background-image: url('example.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; width: 500px; height: 300px; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值