我想在悬停时缩放背景图像但不更改文本大小。我该怎么做？* { margin: 0; padding: 0; }body {}.article-container { width: 300px; height: 200px; border: 1px solid #000000; overflow: hidden; position: relative;}.article-img-holder { width: 100%; height: 100%; background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 1s;}.article-img-holder:hover { transform: scale(1.2);}.split-image-links { width: 100%; height: 100vh; display: flex;}.split-image-links .split-image-link { width: 25%; height: 100%; overflow: hidden; position: relative;}.split-image-links .split-image-link .zoom-image { width: 100%; height: 100%; cursor: pointer; position: relative;}.split-image-links .split-image-link .zoom-image .split-image-header { z-index: 1; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; color: #fff;}.split-image-links .split-image-link .zoom-image .zoom-image-headline { color: #fff; text-align: center; line-height: 100vh; font-family: 'Poppins'; text-transform: uppercase; font-size: 45px; font-weight: 600;}.split-image-links .split-image-link .zoom-image.zoom-image-first { background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1); background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 0.5s;}.split-image-links .split-image-link .zoom-image:hover { transform: scale(1.1);}<body> <div class="split-image-links"> <div class="split-image-link"> <div class="zoom-image zoom-image-first"> <h1 class="zoom-image-headline">who</h1> </div> </div> </div></body>
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
不要使用scale()整个元素，而是使用background-size属性，这种方式font-size将保持不变，让我知道它是否适合你。
.bg {
width: 400px;
height: 240px;
margin: 30px auto;
background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;
background-size: 100%; /* work with the background-size */
transition: background-size 1s ease-in-out;
position: relative;
z-index: 1;
}
.bg:hover {
background-size: 120% /* work with the background-size */
}
.bg::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: -1;
}
.bg h2 {
text-align: center;
font-size: 60px;
line-height: 230px;
font-family: sans-serif;
color: #fff;
}
<div class="bg">
<h2>WHO</h2>
</div>
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
那是 的预期行为scale，它也扩展了每个孩子，只改变 bg 也许你应该使用其他方法。
我提供了一个，我希望它适合你的需要。
在这种方法中，BG 是一个绝对元素，不是的容器，h1悬停现在是 onsplit-image-link而不是zoom-image。
* { margin: 0; padding: 0; }
body {
}
.article-container {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.article-img-holder {
width: 100%;
height: 100%;
background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.article-img-holder:hover {
transform: scale(1.2);
}
.split-image-links {
width: 100%;
height: 100vh;
display: flex;
}
.split-image-links .split-image-link {
width: 25%;
height: 100%;
overflow: hidden;
position: relative;
}
.split-image-links .split-image-link .zoom-image {
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
.split-image-links .split-image-link .zoom-image .split-image-header {
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
color: #fff;
}
.split-image-links .split-image-link .zoom-image-headline {
position: relative;
color: #fff;
text-align: center;
line-height: 100vh;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 45px;
font-weight: 600;
}
.split-image-links .split-image-link .zoom-image.zoom-image-first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)
), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.5s;
}
.split-image-links .split-image-link:hover .zoom-image {
transform: scale(1.1);
}
<body>
<div class="split-image-links">
<div class="split-image-link">
<div class="zoom-image zoom-image-first"></div>
<h1 class="zoom-image-headline">who</h1>
</div>
</div>
</body>
手掌心
TA贡献1942条经验 获得超3个赞
这是您需要的基本版本。
.content {
position: relative;
/* border: 1px solid red; */
display: inline-block;
}
h1 {
color: #FFF;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
.bg:hover, h1:hover + .bg {
transform: scale(1.1);
transition: all 1s;
}
<div class="content">
<h1>WHO</h1>
<img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image">
</div>
添加回答
举报
0/150
提交
取消