文字推div下來

我正在開發一個WordPress主題，並在即時通訊頁面上顯示主頁。目前，我已經有了一個模糊的背景，然後將文字疊加在背景上，以區分背景和文本。對於簡短的標題，我正在開始工作，對於較長的標題，文本正在推下實際的照片框。文字推div下來

我試圖把事情的工作，但我沒有得到任何進展，或者它只是看起來更加古怪，這個一些幫助，將不勝感激。

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; 
}

來源

2015-09-17 Shedlor

你能做一個小提琴或codepen演示嗎？我猜'＃topbg'的固定高度是這個原因，你可以嘗試改變爲'min-height：40px;'而不是'height：40px;' – Aziz

@Aziz它是一個WordPress站點，所以JsFiddle不會通過標題等傳輸。我不再使用'＃topbg'，所以不是這樣。這是一個鏈接：http://theuntoldspiral.com/ – Shedlor

感謝分享的鏈接，幫助了很多！你的代碼是有點複雜的結構簡單，所有你需要的是一個div容器其中有三件事情：標題，背景格，內容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 link標籤裏面的h2標籤爲better semantics
背景格爲實現使用position:absolute + z-index:-1; css技巧
請注意，對於多個元素使用相同的id是一個語法錯誤 - id s是唯一的，所以使用類來代替。瞭解更多關於class vs id

來源

2015-09-19 13:03:53 Aziz

文字推div下來

回答

相關問題