Html 未显示框阴影或z索引
我已经尝试了我所知道的关于这个东西的很多东西,但是没有在图像上显示框阴影 我想显示叠加在图像上的阴影。和…一样 请帮助我 HTML:Html 未显示框阴影或z索引,html,z-index,css,Html,Z Index,Css,我已经尝试了我所知道的关于这个东西的很多东西,但是没有在图像上显示框阴影 我想显示叠加在图像上的阴影。和…一样 请帮助我 HTML: <div class="related-posts"> <h3 class="related-title">Related Posts</h3> <ul id="related-posts" class="related-list"> <li>
<div class="related-posts">
<h3 class="related-title">Related Posts</h3>
<ul id="related-posts" class="related-list">
<li>
<a title="Permanent Link toHow Genetics and Epigentics Relate to Your Health and Fitness" rel="bookmark" href="http://TheSamEffect.com/how-genetics-and-epigentics-relate-to-your-health-and-fitness/">
<img class="attachment-Header Square" width="297" height="200" title="genes2" alt="genes2" src="http://TheSamEffect.com/wp-content/uploads/genes2-297x200.jpg">
<span class="related-heading">How Genetics and Epigentics Relate to Your Health and Fitness</span>
</a>
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
.related-posts ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.related-list li {
background-color: #F4F4F4;
box-shadow: 0 0 10px #000000 inset;
float: left;
height: 150px;
list-style: none outside none !important;
margin: 0.25em !important;
overflow: hidden;
position: relative;
text-align: center;
width: 216px;
}
.related-posts ul li a {
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-decoration: none;
}
.related-posts a {
color: #F4F4F4;
}
.related-list img {
display: block;
margin: 0;
position: absolute;
}
.related-heading {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
font-family: Conv_resea-bolditalic,"Helvetica Neue",Arial,Helvetica,sans-serif,georgia;
font-size: 16px;
left: 0;
min-height: 40px;
padding: 10px;
position: absolute;
width: 90.5%;
z-index: 1;
}
PHP-WP代码:
这就是我从《创世纪》中提取图像的方式
$img=genesis\u get\u image()?genesis_get_图像(数组('size'=>'Header Square')):'';
$related.='';
在做了所有这些之后,我仍然看不到盒子的阴影,实际上阴影在它的实际位置,但由于z指数,我认为我看不到可见的阴影
请帮我解决这个问题
非常感谢。
解决方案后:
<div class="related-posts">
<h3 class="related-title">Related Posts</h3>
<ul id="related-posts" class="related-list">
<li>
<a title="Permanent Link toHow Genetics and Epigentics Relate to Your Health and Fitness" rel="bookmark" href="http://TheSamEffect.com/how-genetics-and-epigentics-relate-to-your-health-and-fitness/">
<img class="attachment-Header Square" width="297" height="200" title="genes2" alt="genes2" src="http://TheSamEffect.com/wp-content/uploads/genes2-297x200.jpg">
<span class="related-heading">How Genetics and Epigentics Relate to Your Health and Fitness</span>
</a>
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
.related-posts ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.related-list li {
background-color: #F4F4F4;
box-shadow: 0 0 10px #000000 inset;
float: left;
height: 150px;
list-style: none outside none !important;
margin: 0.25em !important;
overflow: hidden;
position: relative;
text-align: center;
width: 216px;
}
.related-posts ul li a {
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-decoration: none;
}
.related-posts a {
color: #F4F4F4;
}
.related-list img {
display: block;
margin: 0;
position: absolute;
}
.related-heading {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
font-family: Conv_resea-bolditalic,"Helvetica Neue",Arial,Helvetica,sans-serif,georgia;
font-size: 16px;
left: 0;
min-height: 40px;
padding: 10px;
position: absolute;
width: 90.5%;
z-index: 1;
}
下面的代码仅显示Genesis中的图像url
genesis_get_图像(数组('format'=>'url') 试试类似的方法
将图像设置为div background您的阴影位于具有插入阴影的列表项上,并且列表项中的图像覆盖了该阴影。解决此问题的一种方法是将列表项backround image设置为您的图像,并删除图像本身 根据您的更新,您可以尝试以下操作:
$img = genesis_get_image( array( 'size' => 'Header Square' ) );
$related .= '<li style="background-image:url('.$img.')"><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '"><span class="related-heading">' . get_the_title() . '</span></a></li>';
$img=genesis\u get\u image(数组('size'=>'Header Square');
$related.=';
您是否为li
元素定义了:hover
?我如何才能做到这一点。。其相关的邮政区。它也应该一直被改变。当你刷新页面时,你将一次又一次地否认这些相关帖子的更改。是什么代码构建了相关帖子代码?您可能希望修改它,使其不生成img标记,并将图像用作列表项的背景。mate i编辑主要问题并添加代码。。。我用它从WP Genesis框架中提取图像。。请检查上面的PHP代码。mate genesis_get_image()图像标记:(我没有听你最后的评论。这是个好主意,但我正在从genesis WP framwork提取图像链接..比如$img=genesis_get_image()?genesis_get_image(数组('size'=>'Header Square')):“”;$related.='';我终于想出了如何在Genesis中提取图像url。。代码是Genesis_get_image(数组('format'=>'url');