用图片定位html背景

最新推荐文章于 2023-02-23 11:33:20 发布

pengmingdong

最新推荐文章于 2023-02-23 11:33:20 发布

阅读量1k

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_31648761/article/details/59109831

版权

前端笔记专栏收录该内容

37 篇文章 3 订阅

订阅专栏

background:url(../images/pub_goods.png) no-repeat 0px 0px;//引入图片路径，图片不重复显示，这里no-repeat后面的两个参数表示的是背景图片的边距

background-size: auto 200px;//将背景图片压缩为200px，比如原图的图标尺寸一般会比较大，这时就需要用到background-size参数缩小图片

background-position:0px -110px;//定位当前元素的背景图片，第一个参数为x横坐标，第二个参数为y纵坐标，一般横纵坐标都是负数开始

贴代码

<div class="head-right">
        <div class="more">

        </div>
</div>
//css代码
.head-right {
    width: 15%;
    height: 45px;
    float: left;


}
.more {
    width: 100%;
    float: right;
    height: 45px;

    background:url(../images/pub_goods.png) no-repeat;
    background-size: auto 200px;
    background-position:0 -110px;



}