css - 图片链接顶部的链接会破坏图片链接

Question

首先，看看这个:http://jsfiddle.net/muncherelli/1kkus9bd/1/

我的 HTML/CSS 有两个问题:

1. 在此 HTML 中的 img 周围有一个链接。我希望在此图像/链接之上有一些文本和其他链接，但该图像仍应作为链接使用(并且当您将鼠标悬停在其上时变暗)。尝试删除带有类“blog-post-feature-overlay-content”的整个 div，您会看到它正常工作，但是一旦我重新添加该 div，它就无法工作。
2. 为了让图像在悬停时变暗，我使用了背景颜色为黑色的不透明度选择器。我还有一个边框圆 Angular 属性，我用它来柔化图像(和底层 div)的 Angular 。底部(图像下方)似乎有一条黑线，有时，根据我的浏览器的宽度，一些黑线会从 Angular 落里露出来。我怎样才能摆脱这个？

需要考虑的一件事:我正在使用 Bootstrap 框架，我不确定它是否会影响或帮助或伤害这种情况。

(不确定我是否需要在这里问两个问题，但它们似乎是相关的)。

这是我正在使用的 HTML/CSS:

HTML:

<br />
<div class="container">
    <div class="row">
        <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 nopadding">
            <div class="blog-post-feature-overlay-container roundy">
                <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane">
                    <img src="http://cache.blog.munchimages.com/blog/wp-content/uploads/2015/07/MI_73-Feature-1200x620.jpg" class="img-responsive roundy blog-post-feature-image" />
                </a>
                <div class="blog-post-feature-overlay-content">
                    <div class="blog-post-feature-overlay-content-top text-right">
                        <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-category-box general-font-title-serif transition-color-ease-500">Latest Post</a>
                        <a href="http://munchimages.com/blog/session-stories/" class="blog-category-box general-font-title-serif transition-color-ease-500">Session Stories</a>
                    </div>
                    <div class="blog-post-feature-overlay-content-bottom">
                         <h1 class="general-font-title-serif">
                            <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-post-feature-overlay-content-title color-white transition-color-ease-500">
                                4th of July
                            </a>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
    </div>
</div>

CSS:

.general-font-title-serif {
    font-family:'Cinzel', serif;
}
.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}
.blog-post-feature-image:hover {
    opacity: 0.9;
}
.color-white {
    color: white;
}
.roundy {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.transition-color-ease-500 {
    -moz-transition: background-color 500ms, color 500ms ease-out;
    -ms-transition: background-color 500ms, color 500ms ease-out;
    -o-transition: background-color 500ms, color 500ms ease-out;
    -webkit-transition: background-color 500ms, color 500ms ease-out;
    transition: background-color 500ms, color 500ms ease-out;
}
div.blog-post-feature-overlay-container {
    background-color: #000;
    position: relative;
}
div.blog-post-feature-overlay-content {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
div.blog-post-feature-overlay-content-top {
    position: absolute;
    right: 20px;
    top: 20px;
}
div.blog-post-feature-overlay-content-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
a.blog-category-box {
    background-color: #ccc;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    padding: 5px 15px;
    text-transform: uppercase;
}
a.blog-category-box:hover {
    background-color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
}
a.blog-post-feature-overlay-content-title {
    text-shadow: 1px 1px #000;
}
a.blog-post-feature-overlay-content-title:hover {
    color: #ddd;
    text-decoration: none;
}
@media (max-width: 768px) {
    .roundy {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
    h1 {
        font-size: 30px;
    }
}

谢谢!

Answer 1

从 div.blog-post-feature-overlay-content 中移除 position:absolute

div.blog-post-feature-overlay-content {
height: 100%;
width: 100%;
}

fiddle

当 position: absolute; 用于此元素时，它会将其从文档流中取出，top:0 和 left:0 相对于其父 blog-post-feature-overlay-container 放置元素 - 尽管是不可见的 - 覆盖整个元素，因为设置了 100% 高度和 100% 宽度。通过删除 position: absolute; 元素保留在文档流中并位于链接后面(因为它们被定位:绝对)，因为它被放置在包含文档树中链接的元素之前