各位大侠好，问一下一个css前端的问题 10
展开全部
我觉得你说的应该是提示层怎么在图片上面吧？一般用到的是 position:absolute;这个CSS属性。具体可以百度一下，稍复杂。注意，在使用 position:absolute;的父级，如果不使用position:relative;则会相对浏览器进行绝对定位。
例子（不怎么兼容，看一下意思即可）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.gg { position:relative; width:400px; height:100px; margin:50px 0px 0px 100px; background:#C30;}
.ggtop { position:absolute; width:150px; height:50px; left:20px; top:10px; background:#000; opacity:0.5; display:none; color:#fff;}
.gg:hover .ggtop { display:block;}
</style>
</head>
<body>
<div class="gg"><div class="ggtop">我之前被隐藏了</div></div>
</body>
</html>
补充的：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.gg { position:relative; width:400px; height:100px; margin:50px 0px 0px 100px; background:#C30;}
.ggtop { position:absolute; width:150px; height:50px; left:20px; top:10px; background:#000; opacity:0.5;color:#fff;}
.gg .close { display:none;}/* 这里只是为了提升权重，否则两个display的样式无执行会有问题 */
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="gg"><div class="ggtop">点击我关闭</div></div>
<script type="text/javascript">
$('.gg .ggtop').click(function(){
$(this).addClass('close');
});
</script>
</body>
</html>
例子（不怎么兼容，看一下意思即可）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.gg { position:relative; width:400px; height:100px; margin:50px 0px 0px 100px; background:#C30;}
.ggtop { position:absolute; width:150px; height:50px; left:20px; top:10px; background:#000; opacity:0.5; display:none; color:#fff;}
.gg:hover .ggtop { display:block;}
</style>
</head>
<body>
<div class="gg"><div class="ggtop">我之前被隐藏了</div></div>
</body>
</html>
补充的：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.gg { position:relative; width:400px; height:100px; margin:50px 0px 0px 100px; background:#C30;}
.ggtop { position:absolute; width:150px; height:50px; left:20px; top:10px; background:#000; opacity:0.5;color:#fff;}
.gg .close { display:none;}/* 这里只是为了提升权重，否则两个display的样式无执行会有问题 */
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="gg"><div class="ggtop">点击我关闭</div></div>
<script type="text/javascript">
$('.gg .ggtop').click(function(){
$(this).addClass('close');
});
</script>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
做个PNG透明的图片，你旁边如果有会PS的人的话，给他一说他就明白的，如果是一个规则的透明的灰色背景的话用样式 {
opacity: 0.2;
filter: alpha(opacity=20);
background-color: #000;
}
背景色是黑色，透明度自己调试，有你这个效果，但是你这个上面还有一个小角，所以简单点的就用一个透明的图片最好。
opacity: 0.2;
filter: alpha(opacity=20);
background-color: #000;
}
背景色是黑色，透明度自己调试，有你这个效果，但是你这个上面还有一个小角，所以简单点的就用一个透明的图片最好。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
帮你看了下源代码：<aside class="c_pop_wrap jspop">
<div class="c_pop"><i class="c_pop_trigon"></i><i class="c_pop_close"></i>
<div class="c_pop_cont">点击下方图标，选择“添加至主屏幕”</div>
</div>
</aside>
应该是div用背景图片。
<div class="c_pop"><i class="c_pop_trigon"></i><i class="c_pop_close"></i>
<div class="c_pop_cont">点击下方图标，选择“添加至主屏幕”</div>
</div>
</aside>
应该是div用背景图片。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在css样式里面加上颜色透明 opacity: 0.65;-moz-opacity: 0.65;filter:alpha(opacity=65);
http://www.codefans.net/jscss/code/2991.shtml
http://www.codefans.net/jscss/code/2991.shtml
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
