Css 如何在实际图像上转换背景图像？
[英]Css How to transition a background image over an actual image?
问题描述
我有一张图像，当用户将鼠标悬停在图像上时，我想从中心显示窗帘效果。 在他们 hover 之后，我想在新背景上显示文本。
正如您从片段中看到的那样，第一个框做了我所期望的减去文本。 第二个盒子有实际图像，但 animation 不起作用
.box { width: 100px; height: 100px; display:inline-block; transition: 1s; }.to-center{ background: linear-gradient(black,black) no-repeat, red; background-size: 100% 100%; background-position:center; }.to-center:hover { background-size: 0% 100%; /* Or 100% 0% */ }.from-center{ background: linear-gradient(red,red) no-repeat, black; background-size: 0% 100%; /* Or 100% 0% */ background-position:center; }.from-center:hover { background-size: 100% 100%; }.from-center:hover:after{ bottom: 0; left: 15px; content:"Hi I am After"; }
<div class="box from-center"></div> <br/> <div class="box from-center"> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg"> </div>
3 个解决方案
解决方案1
1 已采纳 2020-04-15 13:34:08
在这种情况下，在两个元素之间拆分图像，我使用了伪元素并具有相同的效果。
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: url(https://i.picsum.photos/id/163/200/200.jpg); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box>Some text to show</div>
编辑：为了使这个动态我们可以利用 css 变量。
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: var(--data-img); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box style="--data-img:url(https://i.picsum.photos/id/163/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/164/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/165/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/166/200/200.jpg)">Some text to show</div>
解决方案2
0 2020-04-15 13:06:24
我想我会使用伪元素来创建封面，例如：
.reveal { position: relative; display: inline-block; border: 1px solid; }.reveal img { display: block; }.reveal::before, .reveal::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: black; -webkit-transition: 1s; transition: 1s; }.reveal::before { -webkit-transform-origin: left center; transform-origin: left center; left: 0; }.reveal::after { -webkit-transform-origin: right center; transform-origin: right center; right: 0; }.reveal:hover::before, .reveal:hover::after { -webkit-transform: scaleX(0); transform: scaleX(0); }.reveal p { -webkit-transition: 1s 1s; transition: 1s 1s; opacity: 0; }.reveal:hover p { opacity: 1; }
<div class="reveal"> <p>SOME TEXT</p> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg" /> </div>
解决方案3
-2 2020-04-15 13:13:20
您可以使用 Jquery、一点自定义 JS 和一点 CSS 来获得这个基本功能。
这里是以基本的 HTML 作为起点。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My first website</title>
<link rel="stylesheet" href="css-01/css/styles.css">
</head>
<body>
<input id="btn01" type="button" value="Animate" onclick="animation(); hideText();" />
<h1>Here is some heading to animate when you press the button.</h1>
<img src="01.jpg" id="image01" alt="Smiley face" height="750" width="500">
<img src="02.jpg" id="image02" alt="Smiley face" height="750" width="500">
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</html>
你有两个图像，你有你的 jquery，你将用于 animation 效果，你有一个按钮，按下时会调用 function。
您当然可以为此效果使用各种事件触发器，hover 是另一种选择，让 go 与点击事件处理程序
然后，在您的自定义 css 中，您必须将第一个图像的 position 属性设为绝对值。 这具有将其从文档 Model 中删除的效果。
然后将第二个图像的 position 属性设置为相对。 然后，您还必须为第一个图像提供小于第二个图像的 z-index。
#image01 {
position: absolute;
z-index: -1
}
#image02 {
position: relative;
z-index: 1
}
然后，您只需创建 function 以在单击按钮时调用（来自您的自定义 JS 文件）。
function animation() {
$("#image02").fadeToggle("slow");
}
function hideText() {
$("h1").toggle("slow");
}
平滑的 CSS 背景图像过渡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.