gpt4 book ai didi

html - Logo 背景缩放 不使 Logo 缩放

转载 作者:行者123 更新时间:2023-11-28 05:48:32 29 4
gpt4 key购买 nike

我在页眉中使用的 Logo 没有背景,但我在 Logo 悬停时添加了背景。我希望 Logo 背景放大,但我使用的代码使 Logo 放大而不是背景......如何更改代码以在不影响 Logo 的情况下放大 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>

最佳答案

由于您没有提供任何 html,但根据您的问题,我创建了一个场景来帮助您解决问题看看 fiddle 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)
}

对于您的 Logo ,只需将其放在 anim-gah 类之外,然后按照您喜欢的方式调整位置。请注意 z-index 虽然在 jsfiddle 中提到过;)干杯!

关于html - Logo 背景缩放 不使 Logo 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37470497/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com