欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

雪碧图的使用和制作技巧

background-position背景定位

  • background-position属性设置背景图像的起始位置;
  • xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字和百分数值;
  • 关键字成对出现 left right top bottom center,如果仅指定一个关键字,其他值将会是"center";
  • x% y%第一个值是水平位置,第二个值是垂直。左上角是0% 0%。右下角是100% 100%。如果仅指定了一个值,其他值将是50%。默认值为:0% 0%;
  • inherit指定 background-position属性设置应该从父元素继承;

Tip:雪碧图的使用技巧:background-position:X轴 y轴;雪碧图的坐标主要是负值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>background-position背景定位</h2>
<ul>
<li>background-position属性设置背景图像的起始位置;</li>
<li>xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字和百分数值;</li>
<li>关键字成对出现 left right top bottom center,如果仅指定一个关键字,其他值将会是"center";</li>
<li>x% y%第一个值是水平位置,第二个值是垂直。左上角是0% 0%。右下角是100% 100%。如果仅指定了一个值,其他值将是50%。默认值为:0% 0%;</li>
<li>inherit指定 background-position属性设置应该从父元素继承;</li>
</ul>
<p>Tip:雪碧图的使用技巧:background-position:X轴 y轴;雪碧图的坐标主要是负值</p>
</body>
</html>
上一篇标题:overflow的多个作用
下一篇标题:列举background属性的8个属性值(面试题)

相关文章

 

文章-雪碧图的使用和制作技巧发布日期:2021-04-01 17:09作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/246.html