绝对定位给图片四角加上图片修饰

灰太狼 2023-06-05 08:08 2阅读 0赞

emm这个题目写的很抽象

素材：

![1645790-20190515121133553-421985240.gif][]![1645790-20190515121218270-866911012.gif][]

![1645790-20190515121232243-227334864.jpg][]

就是把两个小图加在大图的两个角，作为修饰

思路： 把大图放在盒子里，给盒子相对定位，给小图绝对定位。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>绝对定位--图片修饰</title>
        <style>
        div {
        
            width: 310px;
            height: 190px;
            border: 1px solid lightgray;
            padding: 10px;
            position: relative;
        }
        .top {
        
            position: absolute;
            top: 0;
            left:0;
        }
        .bottom {
        
            position: absolute;
            bottom: 0;
            right:0;
        }
        </style>
    </head>
    <body>
        <div>
            <img src="top_tu.gif" class="top">
            <img src="adv.jpg" alt="ad">
            <img src="br.gif" class="bottom">
        </div>
    </body>
    </html>

效果图：

![1645790-20190515121500347-1066817466.jpg][]

转载于:https://www.cnblogs.com/sandraryan/p/10868688.html

[1645790-20190515121133553-421985240.gif]: https://img2018.cnblogs.com/blog/1645790/201905/1645790-20190515121133553-421985240.gif
[1645790-20190515121218270-866911012.gif]: /images/20230601/feeef495983f4a34bba308ffae52679c.png
[1645790-20190515121232243-227334864.jpg]: /images/20230601/58ee38469bed4e47a30fcb9625361834.png
[1645790-20190515121500347-1066817466.jpg]: /images/20230601/1e26ba0af18c41028f7080b4c7ba5f35.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 itext 生成 PDF(四) 表格绝对定位

不熟悉的基础的可参考： [itext 生成 PDF(一)\_itextpdf\_猪之仆的博客-CSDN博客][itext _ PDF_itextpdf_-CSDN] [it

拼搏现实的明天。/ 2024年03月23日 12:25/ 0 赞/ 64 阅读

相关 CSS绝对定位(css绝对定位的写法)

网页制作中怎么用CSS样式定位图片的位置就简单的图片定位是吧，我给你个范例，然后你参考下。 ![Image 1][] 上面DIV中STYLE里CENTER是图片居中

￡神魔★判官ぃ/ 2023年09月26日 13:56/ 0 赞/ 19 阅读

相关 css背景图片定位

背景图默认平铺： background-repeat: no-repeat;/不平铺/ /repe

川长思鸟来/ 2023年06月11日 05:26/ 0 赞/ 24 阅读

相关绝对定位给图片四角加上图片修饰

emm这个题目写的很抽象素材： ![1645790-20190515121133553-421985240.gif][]![1645790-201905151212182

灰太狼/ 2023年06月05日 08:08/ 0 赞/ 3 阅读

相关给图片设置透明度

from PIL import Image img = Image.open("F:/mx_matting/test_pic/img_resize/e

谁践踏了优雅/ 2023年02月17日 03:17/ 0 赞/ 16 阅读

相关在图片的左上角加上一个图片标签

html = ''; html += '<div style="position:relative"><img src="${imageDomain}/'+da

灰太狼/ 2022年06月17日 02:48/ 0 赞/ 187 阅读

相关 github readme 文档中给图片加上链接

文字超链接 \[需要显示的文字\](链接网址) 插入图片 !\[ \](图片所在网址) 给图片加上链接给图片加上链接，在点击图片后就进入该链接参考网上的教程格

墨蓝/ 2022年05月15日 10:17/ 0 赞/ 386 阅读

相关图片定位一个地方

<style type="text/css"> html,body\{ height:100%;\} \box \{ width:100%; height:

系统管理员/ 2021年12月22日 07:59/ 0 赞/ 226 阅读

相关园角和圆形图片

//圆角ImageView依赖库 compile 'com.makeramen:roundedimageview:2.3.0' xml里需要添加的属性

心已赠人/ 2021年10月01日 00:32/ 0 赞/ 360 阅读

相关 C#给图片添加右下角斜角文字水印

期望效果如下：给每张图片的右下角添加一个文字水印。 ![在这里插入图片描述][20190509225354810.png] 1.准备画布使用`Bitmap`加载图

刺骨的言语ヽ痛彻心扉/ 2021年06月26日 16:06/ 0 赞/ 781 阅读