css background-position属性笔记

原创 PHP笔记  2017-09-24 19:09  阅读 759 views 次

在css中,background-position属性是用来设置背景图像的起始位置。

background-position属性值

  • left top:左上
  • left center:左中
  • left bottom:左下
  • right top:右上
  • right center:左中
  • right bottom:左下
  • center top:中上
  • center center:居中(垂直和和水平)
  • center bottom:中下(仅指定一个关键字,其他值将会是"center",上边同理)
  • x% y%:第一个值是水平位置,第二个值是垂直(如:50% 50%);
  • xpos ypos:第一个值是水平位置,第二个值是垂直。(如:20px 30px 或 20px 30%);
  • inherit:指定background-position属性设置从父元素继承.

语法格式:

background-position:left top / left center / x% y% / xpos ypos / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css background-position属性笔记</title>
<style>
#bp
{
width:500px;
height:300px;
border:1px solid blue;
background-image:url('https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png');
background-repeat:no-repeat;
background-position:top center;
}
</style>
<head/>
<body>
<div id="bp">css background-position属性演示</div>
</body>
</html>

运行结果:

背景简写属性——>css background属性笔记

本文地址:https://www.ggbiji.com/css-background-position.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情