购物车
登陆 / 注册
微信扫码登陆

推荐手册

background-position

background-position
background-position属性可以实现背景定位,是用来设置背景图像的起始位置。
前端控 前端控 更新时间:2019-03-22 11:15:04

background-position属性

含义:

background-position属性可以设置背景图像的起始位置。

浏览器支持:

表格中的数字表示支持该属性的第一个浏览器版本号

属性
background-position

4.0

1.01.01.0  3.5

注意: IE8及更早的浏览器版本不支持一个元素有多个背景图片

属性值:

描述
left     top
left     center
left      bottom
right    top
right    center
right    bottom
center  top
center  center
center  bottom 
如果仅指定一个关键字,其他值将会是"center"
x% y%第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0%
xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions
inherit指定background-position属性设置应该从父元素继承

实例

<!DOCTYPE html>
<html>
<head>
<style>
p{
	width:350px;
	height: 200px;
	border: 1px solid #ccc;
	background-origin: content-box;
	background-image: url("images/鸟.png");
	background-repeat: no-repeat;
        background-position: right;
	padding: 30px;
}
</style>
</head>

<body>
<p>HTML中文网HTML中文网HTML中文网HTML中文网HTML中文网HTML中文网HTML中文网HTML中文网HTML中文网HTML</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号