響應標誌CSS

Question

我已經在我的CSS來運行一個好看的統治我的標誌的每一側以下：

hr.stylelogo { 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
    box-sizing: content-box; 
    margin-bottom: 1.5em; 
} 
hr.stylelogo:after { 
    content: url(http://the_image); 
    display: inline-block; 
    position: relative; 
    top: -14px; 
    padding: 0 10px; 
    background: #ffffff; 
    color: #8c8b8b; 
    font-size: 16px; } 

我已經是我試圖讓響應以某種方式使用該標誌的問題但無法定位此CSS內的圖像。

在我的header.php文件我有以下幾點：

<!-- LOGO BLOCK STARTS HERE --> 
    <div id="logo"> 
<div align="center"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><hr class="stylelogo"></a><br /> 
</div><!-- end #logo --> 
    </div> 
<!-- LOGO BLOCK ENDS HERE --><br /> 

#logo不針對實際的標誌形象的工作。

任何建議非常感謝。 HNY！

Answer 1

好的，我已經解決了這個問題讓我滿意。我添加了另一個div，用於設置在正常模式下不顯示的移動徽標。徽標按照適合徽標寬度的媒體呼叫進行切換：

@media all and (max-width: 32.5em) { 
#logo {display: none; } 
#mobilelogo{display:block;} 
}