Question

我在标题中使用的徽标没有背景，但我添加了徽标悬停时的背景。我想要徽标BACKGROUND放大，但我使用的代码使LOGO放大而不是背景...... 如何更改代码以使徽标后台放大而不影响徽标？我真的已经尝试了几个星期......任何帮助都会受到赞赏。

CSS

.cento-header .logo,
.cento-header .logo a {
  display: block;
  color: #000000;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
}

/**hover**/

.cento-header .logo a:hover img {
  display: block;
  color: #000000;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  background: #000;
  background-size: cover;
  background-position: center center;
}

HTML：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
<body class='tall-header-page  wsite-theme-light'>
<div class="wrapper">
<div class="cento-header">
  <div class="container"> 
    <div class="logo">{logo}</div>
    <label class="hamburger"><span></span></label>
  </div>
  <div class="nav-wrap">
    <div class="container">
      <div class="nav desktop-nav">{menu}</div>
    </div><!-- end .container -->
  </div><!-- end .nav-wrap -->
</div><!-- end .header -->  

<div class="banner-wrap wsite-background">
  <div class="container">
    <div class="banner">
      <h2>{headline:text global="false"}</h2>
      <p>{headline-paragraph:text global="false"}</p>
    </div>
  </div><!-- end container -->
</div><!-- end banner-wrap -->

<div class="content-wrap">
  <div class="container">
    <div class="main-wrap">{content}</div>
  </div><!-- end container -->
</div><!-- end main-wrap -->

<div class="light-blue-wrap">
  <div class="container">
    {light-blue-wrap:content  global="false"}
  </div><!-- end container -->
</div><!-- end light-blue-post -->

 <div class="banner-wrap2 wsite-background">
  <div class="container">
    <div class="banner">
      <h2>{headline:text global="false"}</h2>
      <p>{headline-paragraph:text global="false"}</p>
    </div>
  </div><!-- end container -->
</div><!-- end banner-wrap2 -->

    <div class="usable-one-wrap">
  <div class="container">
    {usable-one-wrap:content  global="false"}
  </div><!-- end container -->
</div><!-- end usable-one-post -->

<div class="footer-wrap">
   <div class="container">
     <div class="footer">{footer}</div>
    </div><!-- end container -->
  </div><!-- end footer-wrap -->
 </div>

 <div class="nav mobile-nav">{menu}</div>

  <script type="text/javascript" src="/files/theme/plugins.js"></script>
 <script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>

Answer 1

由于您没有提供任何HTML，但是根据您的问题，我创建了一个方案来帮助您解决问题看看小提琴https://jsfiddle.net/f7v0frmy/ 我所做的就是创建一个名为.anim-Gah img的可重用类，并将其下的img作为子元素。所以必要的html就像

<div class="container orwhatever anim-Gah">
  <img src="http://27.media.tumblr.com/tumblr_m2mypiS48E1qzex9io1_1280.jpg">
</div>

并且css就是

.anim-Gah img {
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out
}

.anim-Gah:hover img {
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

对于你的标志，只要放在那个动画课以外的地方，无论你喜欢什么样的方式玩。请注意，虽然在jsfiddle中提到了z-index;）干杯！

徽标背景缩放而不进行徽标缩放

HTML：

1 个答案: