Rumah > hujung hadapan web > tutorial css > css鼠标悬浮图片遮罩效果实现代码

css鼠标悬浮图片遮罩效果实现代码

小云云
Lepaskan: 2018-02-28 10:19:00
asal
3262 orang telah melayarinya

本文主要和大家分享css鼠标悬浮图片遮罩效果实现代码,希望能帮助到大家。

css

p>p{    background: rgba(255, 255, 255, 0);    transition: background 0.3s linear;}p:hover>p{    background: rgba(228, 228, 228, 0.29);}
Salin selepas log masuk

html

<p style="width:200px;height:200px;position: absolute;">
    <img src="img/img.jpg" style="width: 100%;height: 100%;"/>
    <p style="position: absolute;width: 100%;height: 100%;top: 0;"></p></p>
Salin selepas log masuk

相关推荐:

javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)_图象特效

Atas ialah kandungan terperinci css鼠标悬浮图片遮罩效果实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan