如何用HTML 、CSS在大图片上放置另一张小图片？拜托了!
作者&投稿：谭衫 （若有异议请与网页底部的电邮联系）
/* 弹性布局 */
.flex{
display: flex;
}
.flex-star {
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
}
.flex-d-btw{
flex-direction:column;
justify-content: space-between;
}
.border{
border: 1px solid red;
}
.left-img{
width: 300px;
height: 300px;
margin-right: 10px;
}
.left-img img{
width: 300px;
height: 300px;
}
.right-img{
width: 140px;
height: 300px;
}
.right-img img{
width: 140px;
height: 140px;
}
最自由定位的莫过于position:relative; position:absolute; 了
.big_bg { position:relative; width:500px; height:300px; margin:0 auto; background:url(bg.jpg);}
.small_img1 { position:absolute; top:10px; left:10px;}
.small_img2 { position:absolute; top:50px; left:50px;}
.small_img3 { position:absolute; top:100px; left:100px;}
1
2
3
<div id="ss"><a href="#">小图片</a><div>
#big {。。。。}
#ss {
position:absolute;
left:100px;
top:150px;
}
根据实际设定。。。
我把小图片绝对定位，该补补position课程。
你把两张图片放在一起就可以了， 然后调整一下排列顺序
隗园金荞： <div id=＂big＂><a href=＂#＂>大图片</a><div><div id=＂ss＂><a href=＂#＂>小图片</a><div>#big {....}#ss { position:absolute; left:100px;top:150px; } 根据实际设定...我把小图片绝对定位,该补补position课程.
龙里县13330531414： HTML怎么在图片上添加文字,也就是图片作为背景,代码和图像显示如下 - ？
隗园金荞： 单纯的html要实现你说的效果很难,必须html和css配合才可以,首先用css为需要设置背景的元素设置背景,然后用html写文字等内容.附加一个简单例子,希望帮到你.(其中1.jpg跟这个页面在一个路径)<!doctype html><html lang=＂en＂> ...
龙里县13330531414： html+css如何在图片上添加文字 - ？
隗园金荞： 绝对定位了解一下. <div class=＂box＂><img src=＂图片路径＂><p>我是文字我是文字</p> </div>.box{position:relative; width:500px;} .box img{width:100%;} .box p{position:absolute;width:300px;height:60px;left:100px;bottom:0px;}
龙里县13330531414： 如何在以下CSS代码中再添加一张小图?覆盖在原来的图片上? - ？
隗园金荞： 可以给图片添加背景图片的.或者写个span或div背景是小图,然后绝对定位在大图上.
龙里县13330531414： 求html中把鼠标放在图片上图片能变大的代码 急急求大神 - ？
隗园金荞： 这个有很多方式实现 第一种:改变图片的宽和高 第二种:准备两张分辨率不同的图片来实现放大 第一种的好处就是简单,但是呢 效果不好 有锯齿 第二种的好处就是效果好 但是实现难度较大 第一种的实现方式我就不说了 第二种的实现方式实际上就是获取那张分辨率较小的图片的位置 然后按比例在分辨率较大的图片上截取 用css可以实现 具体实现 自己慢慢研究
龙里县13330531414： 如何用CSS代码控制图片的大小? - ？
隗园金荞： 假设你的HTML中的图片是这样的:<img id=＂myPic＂ src=＂/images/xx.gif＂ /> 然后你在CSS中写: img#myPic{width:100px; height:120px;} 总之就是width和height两个属性.当然你也可以设置更复杂的样式.
龙里县13330531414： 完全用css控制鼠标移到小图片上在上边显示大图片 - ？
隗园金荞： 你为这个呀,可以到是可以.只不过在ie6及其以前的版本上是不可以的.给你一个代码,你自己看吧.把自己的图片换一下就可以了.<!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂ http://www.w3.org/TR/xhtml1/DTD...
龙里县13330531414： css在图片上显示超链接？
隗园金荞： 绝对定位,正确,通过 position:absolute 和 z-index 悬浮于图片上方即可<div style=＂position:absolute;z-index:100;left:100px; top:100px;＂>所需文字</div> left和top的实际数值你根据自己的情况调整就行了
龙里县13330531414： 利用优先级HTML怎么将列表文字显示在图片上面 - ？
隗园金荞： <style>.ceshi{width:600px; height:400px; background:#ccc; margin:0 auto;} .ceshi .div1{background:#F00; width:300px; height:200px; position:relative; z-index:20;left:20%; top:10%;} .ceshi .div2{position:relative; z-index:100; font-size:36px; color:#...
龙里县13330531414： 如何通过css控制图片的最大宽度和高度 - ？
隗园金荞： 使用max-width和max-height,图片不会变形 比如html为:css设置为:.img{ max-width:50%; }
