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

emm这个题目写的很抽象

素材:

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

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

<!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>

效果图:

原文地址:https://www.cnblogs.com/sandraryan/p/10868688.html

时间: 2024-11-12 08:05:19

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

为CKEDITOR内容中图片加上 图片服务器路径

做网站的时候,前台和后台是分开的, 用了CKEDITOR上传图片,但是发现内容带图片的时候,前台Web浏览的时候是一个红X,一看路径不对,上传的到数据库中的是相对的虚拟路径,例如:<img src="/uploadFile/images/Penguins.jpg" style="height:600px; width:800px" />,需要加上图片服务器.或者是后台服务器的域名. 想了各种方法都没用一个好用的,后来想到了替换或者加上一个域名到路径前面,

给图片右上角加上红色的数字(python)

给图片右上角加上红色的数字(python) by 伍雪颖 from PIL import Image,ImageDraw,ImageFont def addNum(filePath): img = Image.open(filePath) size = img.size fontSize = size[1] / 4 draw = ImageDraw.Draw(img) ttFont = ImageFont.truetype("/Library/Fonts/arial.ttf", fon

android如果给imageview做圆角,如果在原有的bitmap上加上一些修饰的drawable

先上效果图: Layout文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

java关于图片处理修改图片大小

最近做了一个关于图片浏览的内容.因为图片都是一些证件的资料的扫描件所以比较大,对系统的影响也是非常之大的,有很大可能直接把系统干死.那么我是这么处理的,给大家分享一下.如果大家有好的方案的话一定要早点告诉我. 需求简单介绍: 上传文件是压缩包,但是到查看资料的时候压缩包可下载本地看,同时也可以在系统中直接在线浏览. 设计方案 1 营业部用户上传图片文件压缩包文件到综合业务系统tomcat服务器,系统在tomcat服务器将压缩文件解压到系统临时目录. 2 系统分析解压的图片文件(文件名上有分类和序

spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE b

Android圆角图片和圆形图片实现总结

1. 概述 Android研发中经常会遇见圆角或者圆形图片的展示,但是系统中ImageView并不能直接支持,需要我们自己做一些处理,来实现圆角图片或者圆形图片,自己最近对这块的实现做了一下总结,看一下几种实现方法. 图层叠加,上层覆盖一层蒙版,遮挡图片,让图片展示出圆角或者圆形效果 重新绘制 BitmapShader Xfermode RoundedBitmapDrawable CardView,使用官方控件,自动裁剪,达到圆角或者圆形效果.(5.0以上系统) 第一种方法,很傻,不太优雅,不推

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

Golang压缩Jpeg图片和PNG图片

博主一直在维护一个导出PDF的服务,但是这个服务导出的PDF文件是真的巨大,动辄就上百MB.这里面主要是图片占据了大多数体积,所以考虑在导出前压缩一下图片. Jpeg的图片压缩是很好做的,因为jpeg这个协议本身就支持调整图片质量的.在golang中,我们只需要使用标准库的image/jpeg,将图片从二进制数据解码后,降低质量再编码为二进制数据即可实现压缩.而且质量和压缩比例相对而言还不错. func compressImageResource(data []byte) []byte { im