8.使用背景图,制作雪碧图效果

使用背景图,制作雪碧图效果:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="./reset.css">
    <style>
        .img{
            width:150px;
            height:150px;
            border:2px solid;
            background-image:url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=382503044,3585482793&fm=26&gp=0.jpg");
            background-repeat: no-repeat;
            background-position:-160px -80px;
        }
    style>
head>
<body>
    <div class="img">

    div>
body>

html>
index.html

 

原图展示:

8.使用背景图,制作雪碧图效果_第1张图片

 

 

我们要从上面的图片中抠取出太阳来当做背景图片。

 

效果展示:

8.使用背景图,制作雪碧图效果_第2张图片

 

你可能感兴趣的:(8.使用背景图,制作雪碧图效果)