Javascript Css如何将背景图像转换为实际图像？_Javascript_Html_Css

Javascript Css如何将背景图像转换为实际图像？

javascript html css

Javascript Css如何将背景图像转换为实际图像？,javascript,html,css,Javascript,Html,Css,我有一个图像，当用户将鼠标悬停在图像上时，我想从中心显示一个窗帘效果。在它们悬停之后，我想在新的背景上显示文本正如您从代码片段中看到的，第一个框完成了我期望的减去文本的操作。第二个框具有实际图像，但动画不起作用 .box{ 宽度：100px；高度：100px；显示：内联块；过渡：1s； } .居中{ 背景：线性渐变（黑色，黑色）无重复，红色背景大小：100%100%；背景位置：中心； } .到中心：悬停{ 背景大小：0%100%；/*或100%0%*/ } .从中间{ 背景：

我有一个图像，当用户将鼠标悬停在图像上时，我想从中心显示一个窗帘效果。在它们悬停之后，我想在新的背景上显示文本

正如您从代码片段中看到的，第一个框完成了我期望的减去文本的操作。第二个框具有实际图像，但动画不起作用

.box{
宽度：100px；
高度：100px；
显示：内联块；
过渡：1s；
}
.居中{
背景：
线性渐变（黑色，黑色）无重复，
红色
背景大小：100%100%；
背景位置：中心；
}
.到中心：悬停{
背景大小：0%100%；/*或100%0%*/
}
.从中间{
背景：
线性渐变（红色，红色）无重复，
黑色
背景大小：0%100%；/*或100%0%*/
背景位置：中心；
}
.从中间开始：悬停{
背景大小：100%100%；
}
.从中间开始：悬停：之后{
底部：0；
左：15px；
内容：“你好，我在找你”；
}

我想我应该使用伪元素来创建封面，如：

.discover{
位置：相对位置；
显示：内联块；
边框：1px实心；
}
.显示img{
显示：块；
}
在…之前，
在…之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：50%；
身高：100%；
背景：黑色；
-webkit转换：1s；
过渡：1s；
}
在…之前{
-webkit变换原点：左中心；
变换原点：左中心；
左：0；
}
在…之后{
-webkit变换原点：右中心；
变换原点：右中心；
右：0；
}
.显示：悬停：：之前，
.显示：悬停：：之后{
-webkit转换：scaleX（0）；
变换：scaleX（0）；
}
.揭示{
-webkit转换：1s 1s；
过渡：1s-1s；
不透明度：0；
}
.展示：悬停p{
不透明度：1；
}


一些文本

您可以通过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>

然后，您只需创建一个函数，该函数将在单击按钮时被调用（来自您的自定义JS文件）

在本例中，我使用伪元素在两个元素之间分割图像，并具有相同的效果

[box]{
宽度：200px；
高度：200px；
位置：相对位置；
溢出：隐藏；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
}
[方框]：之前，
[框]：之后{
位置：绝对位置；
内容：''；
宽度：50%；
身高：100%；
转变：转变1s；
背景图片：url(https://i.picsum.photos/id/163/200/200.jpg);
背景大小：200%100%；
背景重复：无重复；
}
[方框]：之前{
左：0；
背景位置：左0居中；
}
[框]：之后{
右：0；
背景位置：右0中心；
}
[框]：悬停：在{
转换：translateX（100%）
}
[框]：悬停：在{
转换：translateX（-100%）
}

一些要显示的文本

我在您的代码段中没有看到任何可以显示的文本。已将其添加到中。另外，我需要文本显示左下角，而不是

使用图像作为背景。我对我的帖子进行了大量编辑，希望现在能给出完整的答案。因此，这是正确的方向。我希望先显示图像，然后显示文本。我已经更新了上面的代码片段，以显示我正在寻找的内容我已经在文本上添加了不透明度转换+延迟-这就是您正在寻找的吗？如果您希望在鼠标移出时反转转换，也可以这样做（例如，淡出文本，然后关闭百叶窗）-还添加了：）我希望图像最初显示时与片段中的第二个图像完全相同。然后，当用户将鼠标悬停在该图像上时，会显示帘幕效果，然后第一个图像会淡出，它只显示红色背景，上面有文本。如果不在css中指定图像，则可以说我正在使用类似ng REPLATE或ng For的重复，并有一个图像列表。我怎样才能将其附加到后台url？

#image01 {
  position: absolute;
  z-index: -1
}
#image02 {
  position: relative;
  z-index: 1
}

function animation() {
  $("#image02").fadeToggle("slow");
}

function hideText() {
  $("h1").toggle("slow");
}