如何用CSS把一个图片放在另一个图片的右（左）下角？形如百度贴吧会员头像上横批！

html-css0316

如何用CSS把一个图片放在另一个图片的右（左）下角？形如百度贴吧会员头像上横批！,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<body>

第一种实现方法：图片作为背景

<div style="width:110pxheight:110pxbackground-image:url(http://tb.himg.baidu.com/sys/portrait/item/b5ceb7e7d6d0b5c4bcc5c4af5f8909)position:relative">

<div style="width:83pxheight:20pxbackground-image:url(http://tieba.baidu.com/tb/static-money/mall/mall_5.gif)position:absolutebottom:0">

</div>

</div>

第二种实现方法：div使用绝对定位，图片作为div里的对象

<div style="width:110pxheight:110pxposition:absolutetop:180pxleft:0">

<img src="http://tb.himg.baidu.com/sys/portrait/item/b5ceb7e7d6d0b5c4bcc5c4af5f8909"/>

<div style=" position:absoluteleft:0bottom:0">

<img src="http://tieba.baidu.com/tb/static-money/mall/mall_5.gif" />

</div>

</div>

</body>

</html>

两种方法都可以，也可以自己再组合。

演示的图片是直接使用百度贴吧里的图片的，楼主可以换成自己的图片。

代码直接贴过去运行就可以了。

<style>a img {filter:alpha(opacity=100,style=2)}a:hover img {filter:none/*隐约头像*/}</style>

<style type=text/css>#userPicture a:hover img {filter:FlipH()}</style><!--让你的照片翻转-->

<style type=text/css>#talk .thumbpic a:hover img {filter:FlipH()}</style><!--让你的照片翻转-->

<style type=text/css>#userVisitor .personIcon a:hover img {filter:FlipH()}</style><!--让"最近谁浏览我的页面"里的头像翻转-->

<style type=text/css>#userFriend .personIcon a:hover img {filter:FlipH()}</style><!--让"我最近登录的好友"里的头像翻转-->

<style type=text/css>#userAlbum a:hover img {filter:FlipH()}</style><!--让"我的相册"里的头像翻转-->

首先，您需要成为快手的正式会员，然后登录快手官网，点击“我的”，进入会员设置页面，点击“编辑”按钮，点击“头像设置”，然后选择“更改VIP框框头像”，选择你想要使用的VIP头像框框，然后保存设置即可。