製作我的標題圖片訪問和用戶友好

Question

我有問題將圖像設置爲我的標題爲每個頁面的標題背景。

我需要它響應地工作，並能夠在其上添加較暗的背景，以便標題更容易閱讀，並且標題應始終保持在屏幕的中間位置和屏幕尺寸。

我設法得到了一些解決方法，但它不是一個好的解決方案，因爲它通過CSS使圖像不可訪問，我不能添加一個ALT或標題標籤它並且如果用戶想要在Pinterest上分享，則例如他將不會獲得固定該圖像的選項。

我怎樣才能讓它與HTML本身的圖像一起工作？

這裏是PHP代碼獲取圖像：

<?php 
    $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); 
    $url = $thumb['0']; 
?> 
<div class="top-image" style="background-image:url('<?=$url?>')"> 
    <div class="in-table"> 
     <h1 class="entry-title"><?php the_title(); ?></h1> 
    </div> 
</div> 

這裏是鏈接到例如網頁，任何幫助將非常感激，在此先感謝。

http://didyouknowfacts.org/animals/

Answer 1

其實你的所作所爲是正確的。使用CSS來創建背景圖像是一種方法。

但是，如果你想要去傳統的HTML，那麼你需要的一些原因是這樣的

<div class="top-image"> 
<div class="in-table"> 
    <img src="<?=$url?>" id=image /> 
    <h1 class="entry-title"><?php the_title(); ?></h1> 
</div> 
</div> 

，那麼你需要創建它的CSS

.in-table {position:relative}; 
#image {position:absolute; left:0; top:0; width:100%;} 

基本上使作爲背景的東西，你只需要爲圖像或標題創建絕對位置。在我上面的例子中，這是圖像。