Javascript 如何在背景URL的特定部分创建悬停光泽效果_Javascript_Html_Css

Javascript 如何在背景URL的特定部分创建悬停光泽效果

javascript html css

Javascript 如何在背景URL的特定部分创建悬停光泽效果,javascript,html,css,Javascript,Html,Css,所以我在我的主页上设置了一个背景图像URL 我想知道如何在背景url的特定部分创建悬停光泽效果我很想知道这是否可以实现，因为我没有设计任何锚元素的样式 home.html.erb 日韩奢华护肤品！ application.html.erb 样本应用假%> 假%> 您可以使用某种带有渐变的关键帧动画来实现某种光泽效果。更改动画计时将允许更快/更慢的动画持续时间，并且还可以更改关键帧本身以提供更合适的效果。背景图像{ 高度：300px；宽度：100%；背景：url（'http

所以我在我的主页上设置了一个背景图像URL

我想知道如何在背景url的特定部分创建悬停光泽效果

我很想知道这是否可以实现，因为我没有设计任何锚元素的样式

home.html.erb


日韩奢华护肤品！

application.html.erb


样本应用
假%>
假%>

您可以使用某种带有渐变的关键帧动画来实现某种光泽效果。更改

动画

计时将允许更快/更慢的动画持续时间，并且还可以更改关键帧本身以提供更合适的效果

。背景图像{
高度：300px；
宽度：100%；
背景：url（'https://photos-1.dropbox.com/t/2/AABgjS7Qy1ic5R5qfrZQcPI9l9zi6Xg37V-MANnf8Hs8VQ/12/80984193/png/32x32/3/1460995200/0/2/japan%20copy.png/EKmAgD8YmrAEIAIoAg/ykSKOOMwapsQ0k9ROiKzlp3-lDFikK1tmVaOI_cdDs0？尺寸_模式=3&尺寸=1600x1200’；
背景大小：100%100%；
位置：相对位置；
溢出：隐藏；
}
.发光{
位置：绝对位置；
最高：50%；
左：50%；
高度：300px；
边界半径：50%；
宽度：300px；
背景：线性梯度（-45度，透明0%，rgba（255255,0.6）50%，透明100%）；
不透明度：0；
}
.背景图像：悬停。发光{
动画：发光1s线性向前1；
}
@关键帧发光{
0% {
不透明度：0；
显示：内联块；
最高：50%；
左：50%；
}
80% {
不透明度：1；
最高：25%；
左：25%；
}
100% {
不透明度：0；
显示：内联块；
最高：0%；
左：0%；
}
}

您可以使用某种带有渐变的关键帧动画来实现某种光泽效果。更改

动画

计时将允许更快/更慢的动画持续时间，并且还可以更改关键帧本身以提供更合适的效果

。背景图像{
高度：300px；
宽度：100%；
背景：url（'https://photos-1.dropbox.com/t/2/AABgjS7Qy1ic5R5qfrZQcPI9l9zi6Xg37V-MANnf8Hs8VQ/12/80984193/png/32x32/3/1460995200/0/2/japan%20copy.png/EKmAgD8YmrAEIAIoAg/ykSKOOMwapsQ0k9ROiKzlp3-lDFikK1tmVaOI_cdDs0？尺寸_模式=3&尺寸=1600x1200’；
背景大小：100%100%；
位置：相对位置；
溢出：隐藏；
}
.发光{
位置：绝对位置；
最高：50%；
左：50%；
高度：300px；
边界半径：50%；
宽度：300px；
背景：线性梯度（-45度，透明0%，rgba（255255,0.6）50%，透明100%）；
不透明度：0；
}
.背景图像：悬停。发光{
动画：发光1s线性向前1；
}
@关键帧发光{
0% {
不透明度：0；
显示：内联块；
最高：50%；
左：50%；
}
80% {
不透明度：1；
最高：25%；
左：25%；
}
100% {
不透明度：0；
显示：内联块；
最高：0%；
左：0%；
}
}

你能提供一把小提琴吗？谢谢你的留言，我对前端的东西还不熟悉，还没有。你想让我提供任何HTML或CSS。这在技术上是不可能的吗？是的，提供给他们，那么就更容易解决会产生影响的问题。尽管我没有操纵任何元素或主持人，但我的想法是在不规则形状的奶油区域上方放置一个透明背景的div，然后提供悬停。我会告诉你我是否能来。你能提供一把小提琴吗？谢谢你的留言，我对前端的东西还不熟悉，还没有。你想让我提供任何HTML或CSS。这在技术上是不可能的吗？是的，提供给他们，那么就更容易解决会产生影响的问题。尽管我没有操纵任何元素或主持人，但我的想法是在不规则形状的奶油区域上方放置一个透明背景的div，然后提供悬停。如果可以，我会告诉你。谢谢你的输入，你提供的代码片段没有运行是的，这将非常有助于合并原始图像。这只是更改

背景属性的问题。至于“它不工作”，您可能需要包括供应商前缀以支持各种浏览器。我唯一的查询是关于您的div class=“background image”。我没有导入当前在my home.html.erb上使用的url，我直接从CSS中提取日本图像。请查看我上面的更新代码。非常感谢您的输入，您提供的代码片段没有运行是的，这将非常有助于合并原始图像。这只是更改background属性的问题。至于“它不工作”，您可能需要包括供应商前缀以支持各种浏览器。我唯一的查询是关于您的div class=“background image”。我没有导入当前在my home.html.erb上使用的url，我直接从CSS中提取日本图像。请查看我上面的更新代码。非常感谢你
<%= content_for :head do %>
  <%= stylesheet_link_tag "home" %>
<% end %>

<div class="jumbotron center">
    <h1>Japanese and South Korean luxury Skincare!</h1>
    <p>
      <%= link_to "MOISTURISERS", pins_path, class: "btn btn-pink btn-lg" %>
      <%= link_to "CLEANSERS", "#", class: "btn btn-info btn-lg" %>
      <%= link_to "TREATMENTS", "#", class: "btn btn-info btn-lg" %>
    </p>    
</div>

<!DOCTYPE html>
<html>
<head>
  <title>SampleApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
  <%= csrf_meta_tags %>
  <%= yield :head %>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <%= render 'layouts/header' %>
    <div class="container">
    <% flash.each do |name, msg| %>
     <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
    <% end %>
    <%= yield %>
    </div>

</body>
</html>