span文字在左背景图片在右

使用CSS背景定位创建独特元素

最新推荐文章于 2020-01-07 14:42:47 发布

weixin_30954265

最新推荐文章于 2020-01-07 14:42:47 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wiming/p/3736423.html

本文详细介绍了如何使用CSS的background-position属性来创建独特的视觉元素，并提供了实例演示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
span { 
    background-image:url(http://a3.qpic.cn/psb?/V11OXL2y3vDNOK/BLjgWL6kfs*3sZIUVjubWPHQWxn3Ox2.13qxCeT058s!/b/dKY.3OoMEwAA&bo=GwAbAAAAAAADACU!&rf=0-18);
    background-repeat:no-repeat;
    background-position:100% 50%;/*这是一句神奇的语句*/
    /*如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

    background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

    参考网站：http://www.w3school.com.cn/css/css_background.asp
    */
    border: 1px solid #E6E6E6;
    color: #999999;
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
    margin-right: 5px;
    text-align: right;
    padding-right: 28px;
}
<style>
</style>
</head>
<body>
<span>hello world！</span>
</body>
</html>