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

响应式徽标css

1 个答案: