响应标志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;} 
}