Question

我正在开发一个WordPress主题，我正在主页上做邮箱。目前，我有一个模糊的背景，然后文本覆盖与背景，以区分背景和文本。对于简短的标题，我正在使用它，对于更长的标题文本正在推动实际的照片框。

我试图让事情发挥作用，但我没有取得任何进展，或者只是看起来更奇怪，一些帮助，这将是值得赞赏的。

HTML：

<div id="hanger">
<div class="h2"><a href="<?php the_permalink() ?>" title="<?php     the_title_attribute(); ?>"><h2><?php the_title(); ?></h2></a>       </div>
<div id="bgdiv"><div id="hang-bg" style="background-image: url('<?php echo $background[0]; ?>'); background-size: cover; height: 200px; -webkit-filter: blur(5px);-moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);   margin: -5px -10px -10px -5px; "></div>
</div></div>
<?php endwhile; else : ?>
<?php endif; ?>

CSS：

#hanger {
    height: 200px;
    margin-top: -20px;
    text-align: center;
}

#hanger h2 {
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

#hanger a {
    font-size: 20px;
    color: white;
    text-decoration: none;
}

#topbg {
    height: 40px;
    width: 100%;
    background: #7f7f7f;
    opacity: 0.5;
    position: relative;
    top: -220px;
}

#bgdiv {
    overflow: hidden;
    border: 1px solid lightblue;
    position: relative;
    top: -70px;
    z-index: 0;
}

.h2 {
    background: url("./images/opac-grey.png");
    position: relative;
    z-index: 2;
    width: 698px;
    margin: 0 auto;
}

Answer 1

感谢分享链接，帮了很多忙！你的代码对于一个简单的结构来说有点复杂，你需要的只是一个容器div，它有3个东西：title，background div，content div - 它可以简化为：

post box > post background + post title + post content

代码如下：

.hanger > .hanger-bg + (h2>a) + .hanger-content

JSFiddle Example

HTML / WordPress代码

<!-- post box -->
<div class="hanger">
    <div class="hanger-bg" style="background-image: url('<?php echo $background[0]; ?>');"></div>
    <!-- post title -->
    <h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <!-- post content -->
    <div class="hanger-content">
        <?php the_content(); ?>
    </div>
</div>
<!-- end post -->

<?php endwhile; else : ?>
<?php endif; ?>

CSS代码

/* post box */

.hanger {
    min-height: 200px;
    margin-bottom: 20px;
    text-align: center;
    color:#FFF;
    border: 1px solid lightblue;
    position:relative;
}

/* post background */

.hanger-bg {
    background-size: cover;
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
    /* blur effect */
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

/* post title */

.hanger h2 {
    font-size: 35px;
    margin:0;
    text-transform: uppercase;
    /*background: rgba(238, 238, 238, 0.5);*/
    background: url("./images/opac-grey.png");
    min-height:40px;
}

.hanger h2 a {
    color: white;
    text-decoration: none;
}

/* post content */

.hanger-content {
    padding:20px;
    text-align:left;
}

很少有人注意到：

我将a链接标记放在better semantics

h2

使用position:absolute + z-index:-1; css技巧
请注意，对多个元素使用相同的id语法错误 - id是唯一的，因此请改用类。在class vs id

文字推Div Div

1 个答案: