手工SEO

手工SEO首頁 帝國教程 正文

css3設置圖片彈出效果

手工SEO 2020-03-14 14:18:32 帝國教程 160℃ 手工SEO

網站制作中,經常會用到圖片彈出的效果,即當點擊網頁中的圖片時,圖片彈出,其他背景不能選中狀態,如下圖:

css3設置圖片彈出效果

 
 
其實這種狀態很簡單,下面就分享一個用css3設置的案例。
本方法的知識點是半透明設置屬性opacity ,具體的代碼如下。
 
<!DOCTYPE html>
<html>
 <head>
<meta charset=”utf-8″ />
<title>圖片彈出效果</title>
<style>
*{
margin:0;}
#all{
}
#bg{ 
width:100%;
height:100%;
background-color:#000;
display:none;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
}
#top{
display:none;
position:absolute;
left:300px;
top:100px;}
 
</style>
 
 
</head>
<body>
<div id="all">
    <img src="images/2.gif" width="600" height="800"  onclick="show()" />
    <div id="bg"></div>
    <div id="top">
<img src="images/1.jpg"  width="100" height="200" onclick="hidd()" />
    </div>
</div>
<script>
function show(){
var bg=document.getElementById('bg');
var top=document.getElementById('top');
bg.style.display="block";
top.style.display="block";
}
function hidd(){
var bg=document.getElementById('bg');
var top=document.getElementById('top');
bg.style.display="none";
top.style.display="none";
}
</script>
 
 
</body>
</html>

上一篇:免費php空間byethost注冊申請的方法

下一篇:怎樣用photoshop鋼筆工具摳圖

網站分類
標簽列表
app棋牌游戏代理平台