css中在div上悬停鼠标怎样可以让他透明的显示下面的图片，而不是像这样一块白板？

html-css030

css中在div上悬停鼠标怎样可以让他透明的显示下面的图片，而不是像这样一块白板？,第1张

background-color:rgba(220,38,38,0.2)

background:red

opacity:0.2

背景设置透明度

<div class="div">

<div class="img1 img">

    <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b8389b504fc2d5623c4a2718ec1190ef77c66c81.jpg">

</div>

<div class="img2 img">

    <img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/1e30e924b899a9011c88acc316950a7b0308f582.jpg">

</div>

</div>

<style>

.div{position:relative width:800px margin:auto}

.img{position:absolute z-index:0}

.img2{left:150px top:100px}

.img1:hover{z-index:1}

</style>

利用hover伪类就可以实现，自己再稍微修改下就可以了，解决请采纳

图片不要跟文字同在一容器里就很好弄了

图片归图片，文字用个DIV或P包起来~~~左浮动

一定要不变动html结构的话，那就把外边的容器设成相对，然后左填充至少100px；

里面的图片设成绝对，距左设为零，距上默认为零也可以设置一下零。