在一张图片的某个特定位置添加另外一张图片

时间：2022-04-07 20:36:53
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> /*div1下面 包含着1个图片和1段文字*/ #div1{ position: relative;/*相对定位*/ width: 407px; height: 300px; } /*图片背景的设置*/ #img1{ /*position: static;默认定位,可以省略*/ width: 100%; height: 100%; } /*图片2的设置*/ #span1{ position: absolute;/*绝对定位*/ width: 20%; top: 0px;/*离底下0像素*/ right: 0px;/*离左边0像素*/ } </style>
    </head>
    <body>
        <li id="div1">
            <img src="new.png" id="span1" />
            <img src="1.jpg" id="img1" />
        </li>
    </body>
</html>

其实就是两步：
第一步：给li添加position: relative;属性，表示相对定位。
第二步：将背景图片平铺在li上。
第三步：给图片2设置定位，并且要添加相对定位属性position: absolute;

标签：

相关文章