怪现象,图片照道理应该显示的

zwb8848happy 2016-08-01 08:06:52
贴上代码:


.c-background
{
height: 768px;
background-image: url('./img/contact.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}

.c-cover
{
height: 768px;
background-color: rgba(255,255,255,0.5);
padding-top: 50px;

}


.container
{
width: 80%;
height: 80%;
border: 2px outset blue;
box-shadow: 1px 1px 1px rgba(192,192,192,0.6);
}

.c-showpic
{
position: relative;
width: 400px;
height: 350px;
margin-top: 150px;
border: 1px outset rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.8);

}

.pic-cover
{
position: absolute;
width: 100%;
height: 100%;

background-color: rgba(0,0,0,0.3);
opacity: 0;
}

img
{
position: absolute;
width: 100%;
height: 100%;

z-index: -1;
}



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallery</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">

<script type="text/javascript">
$(document).ready(function(){


});
</script>

</head>

<body>
<div class="c-background">
<div class="c-cover">
<div class="container">
<div class="row">
<div class="col-lg-6 ">
<div class="c-showpic ">
<div class="pic-cover"></div>
<img src="./img/gallery/pic1.jpg" alt="Gallery" >
</div>
</div>


</div>
</div>
</div>
</div>
</body>
</html>


照道理,已经将图片上的div设为透明,图片即可显示,为什么看不到?如下图:


求高手解惑,不胜感激!
...全文
226 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2016-08-03
  • 打赏
  • 举报
回复
引用 8 楼 zwb8848happy 的回复:
[quote=引用 6 楼 KK3K2005 的回复:] 直接放 页面链接出来 帮你一起分析下 不然 太麻烦了
源码不是提供了吗?真是图片看不到[/quote] 你是不是 觉得 大家都和你一样 很有时间 会把 这个代码 黏贴出来 本地打开看 是吧
zwb8848happy 2016-08-02
  • 打赏
  • 举报
回复
引用 6 楼 KK3K2005 的回复:
直接放 页面链接出来 帮你一起分析下 不然 太麻烦了
源码不是提供了吗?真是图片看不到
MrZhangCC 2016-08-02
  • 打赏
  • 举报
回复
不是应该将z-index设置为正的吗?比如1.。。
ddcatlee 2016-08-02
  • 打赏
  • 举报
回复
img { position: absolute; width: 100%; height: 100%; z-index: -1; } ......
KK3K2005 2016-08-02
  • 打赏
  • 举报
回复
直接放 页面链接出来 帮你一起分析下 不然 太麻烦了
zwb8848happy 2016-08-01
  • 打赏
  • 举报
回复
将img的任一祖先div设置背景色后,哪怕将这个祖先节点的z-index设置为-100,都无法看到图片! 有大神可以解惑吗?
JPF1024 2016-08-01
  • 打赏
  • 举报
回复
引用 2 楼 zwb8848happy 的回复:
[quote=引用 1 楼 dcxy0 的回复:] f12调试一下,一般来说div设置透明也不一定会显示。 设置一下z-index试试。
1、注释掉<div class="c-background">和<div class="c-cover"> 可达到预期效果; 2、注释掉<div class="c-background"> 保留<div class="c-cover">因为c-cover颜色设置略透明,所以图片也能看到,但看起来是被 <div class="c-cover">遮住了一样; 3、注释掉<div class="c-cover"> 保留注释掉<div class="c-background">的话,看不到图片! 据此,我估摸着将图片设置z-index为-1后,被<div class="c-background">和<div class="c-cover">遮住了!但是百度后也无法想明白为啥会这样?[/quote] 把图片的z-index设置高一点不就可以了?
zwb8848happy 2016-08-01
  • 打赏
  • 举报
回复
引用 1 楼 dcxy0 的回复:
f12调试一下,一般来说div设置透明也不一定会显示。 设置一下z-index试试。
1、注释掉<div class="c-background">和<div class="c-cover"> 可达到预期效果; 2、注释掉<div class="c-background"> 保留<div class="c-cover">因为c-cover颜色设置略透明,所以图片也能看到,但看起来是被 <div class="c-cover">遮住了一样; 3、注释掉<div class="c-cover"> 保留注释掉<div class="c-background">的话,看不到图片! 据此,我估摸着将图片设置z-index为-1后,被<div class="c-background">和<div class="c-cover">遮住了!但是百度后也无法想明白为啥会这样?
JPF1024 2016-08-01
  • 打赏
  • 举报
回复
f12调试一下,一般来说div设置透明也不一定会显示。 设置一下z-index试试。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧