html - 如何使用css向<img>元素添加渐变叠加？-6ren

html - 如何使用css向元素添加渐变叠加？

转载作者：行者123 更新时间：2023-11-28 00:45:32

29

4

我正在制作这个 page section 的 html 标记.正如您在这里看到的，它是三张图片。当我将鼠标光标放在其中一个上时，图像会移动并覆盖线性渐变。图片代码

代码

.image_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image_row img:hover,
.image_row img:focus {
  transform: translate(-9px, -9px);
  box-shadow: 10px 10px #95e1d3;
}

<div class="image_row">
  <img src="image-1" height="250" width="380" />
  <img src="image-2" height="250" width="380" />
  <img src="image-3" height="250" width="380" />
</div>

我的问题是我不知道如何为图像制作渐变叠加。我尝试了以下代码，但没有带来任何效果:

.image_row img:hover,
.image_row img:focus{
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
background-image: -moz-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
mix-blend-mode: normal;
opacity: 0.9;
}

最佳答案

您可以使用 CSS 添加一个伪元素来覆盖图像并在悬停/焦点上显示，这也具有渐变效果。

我将您的代码修改为以下示例:

.image_row {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .image_row img:hover,
    .image_row img:focus {
      transform: translate(-9px, -9px);
      box-shadow: 10px 10px #95e1d3;
    }
    
    img {
      display: block;
    }

    .image {
      position: relative;
    }

    .image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .image:hover,
    .image:focus {
      transform: translate(-9px, -9px);
      box-shadow: 10px 10px #95e1d3;
    }

    .image:hover::before,
    .image:focus::before {
      background-image: -moz-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      background-image: -webkit-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      background-image: -ms-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      mix-blend-mode: overlay;
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="image_row">
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
  </div>
</body>

</html>

关于html - 如何使用css向<img>元素添加渐变叠加？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50787210/

29

4

0

文章推荐： javascript - Bootstrap 示例 Carousel 代码不切换幻灯片

文章推荐： c++ - 在库中使用 Qt5

graphics - DirectDraw 叠加
有人有 DirectDraw 叠加的工作示例(代码)吗？就像屏幕上移动的东西一样。我一直试图找到 DirectDraw 叠加用法的示例，但未能找到。谢谢。最佳答案尝试其中一些: from gam
java - 将鼠标悬停在缩略图上时显示完整图像作为弹出/叠加
我在 JPanel 中显示缩略图。当将鼠标悬停在此类缩略图上时，我想在缩略图上方的叠加层中显示其完整版本。使用 HTML，我只需创建一个具有适当位置和高 z-index 的 div，以便它覆盖其他所
python - Pygame 叠加
好的，所以我想做一个覆盖屏幕。因此，每当按键为 p 时，屏幕就会暂停并弹出一个屏幕，显示:“按‘q’退出或按‘c’继续，”类似的事情。谁能告诉我怎么做？最佳答案最简单的方法是使用子模块，然后为
html - 叠加/重叠元素
查看我的代码: id mapped! DisplayName (user defined) mapped! Pr
python - 如何将图像应用到小部件背景(叠加)
我想为 QListWidget 或 QWidget 等小部件分配背景图像。这是想法: 理想情况下，背景图像会在其小部件大小发生变化时调整大小。有什么想法如何实现它吗？稍后编辑: 这是对话的屏幕截图，
haskell - 深可能与 yesod 叠加
我正在尝试设置一个授权方案，我在其中检查 1. 用户已登录 2. 用户有权访问某个对象。为此，我首先调用 maybeAuthId ，然后尝试获取当前对象，并“加入”到另一个列出权限的表。有两个级别的可
r - 叠加 fiddle 图ggplot2
我想绘制两个系列的十个 fiddle 图，一个超过第二个: library(ggplot2) #generate some data coco1<-rnorm(10000,0,1) coco2<-c(
jqGrid 触发 "Loading..."叠加
有谁知道如何触发在网格加载时显示的股票 jqGrid“正在加载...”叠加层？我知道我可以毫不费力地使用 jquery 插件，但我希望能够使我的应用程序的外观与 jqGrid 中已经使用的外观保持一致
google-maps - 谷歌地图多边形 - 叠加
我正在尝试在我的谷歌地图上实现“负”覆盖，类似于您在estately.com上获得的效果。基本上，我已经根据收集的 KML 数据成功绘制了 map 多边形。当有多个路径时，它们绘制得很好。因此，对我
java - Android Motionevent 叠加
您好，我正在制作一个 Android 应用程序，它使用地理位置/Google map ，除了选项卡主机之外， map /应用程序上没有任何按钮。所以我需要它，所以如果用户点击 1500 毫秒，就会出现
javascript - 将两张具有不同投影的 map 叠加？
我正在尝试叠加两个不同的 map ，但我无法叠加它们，并且我不知道如何解决此问题。 let bottom_left = ol.proj.fromLonLat([5.00975294202035
javascript - 单击图像时的 Jquery 叠加
jquery 不是最好的，有人可以建议一个通用的方法来实现我想要实现的目标吗？我有一个照片网格，当它们被点击时，一个不透明的覆盖层将在整个图片之上动画化，覆盖层将包含一些动态设置的文本。我有图像和 o
android - android中的 map 叠加
我想问一下如何为我的 android 应用程序添加不同的叠加层？因为我已经有一个扩展 Overlay 的覆盖类，它根据 KML 文件中的某些点绘制多段线。现在我想创建另一个叠加层，使用 GPS 在用户
javascript - 谷歌地图图 block 叠加
我目前正在使用谷歌地图并且是新手..我想知道是否可以将 map 划分为具有确定高度和宽度的某些 tiles 并为它们 color ..如果是，那么有人可以解释如何去做因为我面临困难。最佳答案我认为
Android MapView 叠加，在绘制时缓存位图
我有一个用于在我的 MapView 上绘制路径的叠加层，但我注意到它每秒被不必要地重绘大约十次。由于在 draw 方法中我绘制了路径的每一段，这很容易成为效率问题。出于这个原因，我决定缓存叠加层的内
android - 移动设备相机上的简单 AR 叠加
我是 AR 的新手。但我对我想做什么有一个大概的想法。我想在 Android 中将 UI 元素叠加在相机输入之上。这些 UI 元素将根据陀螺仪、gps 输入、通过蓝牙、wifi 等实时更新。类似
ios - UICollectionViewCell 叠加 View
我有一个带有 .xib 的 UICollectionViewCell。这是 xib 文件的结构您可以看到同一级别的每个元素以及 3 个 ImageView 和一个按钮。但在运行时，这些元素前面有一
ios - 存储大图像以进行 map 叠加
我有一个关于在哪里存储 map 覆盖的大图像的问题。图片约100MB，不能缩小或在线存储(要求)。我一直在考虑使用 Assets 目录(xcassets)，但它似乎适用于在不同设备上需要调整大小的图
CSS 叠加 SmartGWT 样式
我的应用程序的 css 覆盖了 SmartGWT 中的一些样式并真正降低其性能。如果我使用 css 文件运行我的应用程序，它太慢了，我什至无法将鼠标悬停在 ListGrid 小部件上。但是，如果我取
html - 叠加 CSS 效果无法正常工作
我正在制作一个网页，但遇到了问题。当屏幕为 980 像素或更小时，菜单会自行隐藏，屏幕上会出现类似“汉堡包”的按钮菜单。当您单击该按钮时，一个 div 会占据整个屏幕并显示菜单(效果很好)。但是，当您

首页

博学

6Ren·AI

商城

html - 如何使用css向元素添加渐变叠加？