css效果积累02

最新推荐文章于 2020-12-31 17:34:48 发布

不是艳阳

最新推荐文章于 2020-12-31 17:34:48 发布

阅读量218

点赞数 1

分类专栏： CSS Html 文章标签： css

本文链接：https://blog.csdn.net/buruoyanyang/article/details/53506562

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Html

8 篇文章 0 订阅

订阅专栏

通过background-position来设置图片显示的具体位置

首先放代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.car {
    width: 120px;
    height: 30px;
    background: url(./car.png) no-repeat -17px 7px blue;
    border: 1px solid #eee;
    padding-left: 30px;
    position: relative;
    _padding-top: 5px;
    _height: 25px;
}

.car span {
    background-image:url(./car.png);
    background-position:left -36px top -54px;
    padding-left: 7px;
    position: absolute;
    top: -12px;
    left: 20px;
}

.car span i {
    float: left;
    height: 20px;
    background-image:url(./car.png);
    background-position:right -25px;
    padding-right: 5px;
    font-style: normal;
    color: black;
    font-size: 14px;
}

.car a {
    color: #aaa;
    text-decoration: none;
    font-size: 14px;
    padding-left: 15px;
    line-height: 30px;
}

.car b {
    display: inline-block;
    border-color: transparent transparent transparent #CCCCCC;
    border-style: dashed dashed dashed solid;
    border-width: 5px;
    height: 0;
    overflow: hidden;
    width: 0;
}
</style>
</head>
<body>
    <br />
    <br />
    <div class="car">
        <span><i>155</i></span> <a href="NewFile.html" target="_blank">去购物车结算</a>
        <b></b>
    </div>
</body>
</html>

实现效果如下图：这里写图片描述

原图在这里：

解释下主要实现的参数background-position，这个属性可以设置背景图片的具体显示位置，left表示图片左移动多少，top表示图片上移动多少，如果是负数，则表示相反方向移动，如left -54px，其实就是向右移动54px。这样我们可以通过调节具体的数值，通过调节绝对位置，来做到上面的效果。注意，这里的left，top等这些属性，是对背景图片本身来说的。

不是艳阳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css效果积累02

通过background-position来设置图片显示的具体位置首先放代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.car { width: 120px; height: 30px; backgr
复制链接

扫一扫