Question

我需要在悬停时平滑地缩放背景图像，并且为了防止在div中创建任何空白空间，我使用了background-size: cover属性。但是this线程说关键字值不允许动画。所以我将使用jQuery来实现动画。

但我无法弄清楚在悬停时如何在jQuery中设置新的background-size值。我想要再缩放10％，background-size: cover+10%当然不会有效。我应该提供什么才能实现我的目标？

这是我目前的代码。

<style type="text/css">
    #slide_sub {display: table; width: 100%}
    #slide_sub div.image {height: 300px; width: 50%; display: table-cell; background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.2s; vertical-align: middle; padding: 24px; box-sizing: border-box; overflow: hidden; position: relative;}
    #slide_sub div.image:hover {background-size: cover 110%; transition: 0.2s}

    #slide_sub div.text {width: 100%}
</style>

<div class="image" style="background-image: url('a.png')">
    <div class="text">
        <p class="title">TITLE</p>
        <p class="subtitle">SUBTITLE</p>
    </div>
</div>

提前谢谢。

Answer 1

你可以试试这个。

＆＃13;

.wrap {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  color:#fff;
}

.bg_image {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("http://placekitten.com/g/500/500");
  background-size: cover;
  z-index: -1;
  transition: transform .3s;
}

.wrap:hover .bg_image {
  transform: scale(1.5)
}

＆＃13;

<div class=wrap>
  <div class="bg_image"></div>
  <div class="text">
    <p class="title">TITLE</p>
    <p class="subtitle">SUBTITLE</p>
  </div>
</div>

＆＃13;

Answer 2

您可以mouseenter and mouseleave method jQuery animate background $(document).ready(function(e){ $(".image").on("mouseenter",function(){ $(this).css({ "background-size" : "120% 120%", "transition" :"background-size 1s ease" }); }); $(".image").on("mouseleave",function(){ $(this).css({ "background-size" : "100% 100%", "transition" :"background-size 1s ease" }); }); });只使用.image{ background:url(" http://placehold.it/350x150") no-repeat; background-size:100% 100%; overflow:hidden; width:100%; height:400px; border:1px solid #111; }图像，如下所示

mouseenter（） - 当mouseenter一个元素时，触发指定的样式。 mouseleave（） - 当mouseleave元素时，触发指定的样式。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
    <div class="text">
        <p class="title">TITLE</p>
        <p class="subtitle">SUBTITLE</p>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("#frmForm").validate({

rules: {
dep: "required",
type: "required",
stnd: "required",


clnum: {
required: true,
remote: {
url: "../admin/checkEmail.php?data=clausenum",
data: { stnd: $('#stnd').val()},
}
},
clause: "required"

},
messages: {
dep: "**",
type: "**",
stnd: "**",


clnum: {
required:"**",

remote: "already exists"
},
clause: "**"

}
});
});
</script>

<select class="form-control valid" name="stnd" id="stnd" style="width:120px;" aria-required="true" aria-invalid="false">
<option value="">select </option>
<option value="OHSAS 18001:2007">OHSAS 18001:2007</option>
<option value="ISO 14001:2015">ISO 14001:2015</option>
<option value="ISO 9001:2015">ISO 9001:2015</option>
<option value="IMS-ISO 14001, OHSAS 18001">IMS-ISO 14001, OHSAS 18001</option>
<option value="Safety Audit IS 14489">Safety Audit IS 14489</option>
<option value="Priority Inspection">Priority Inspection</option>
</select>

Answer 3

伪元素对此是完美的，因此您可以保留现有标记。

将它与transform结合使用，你得到了这个

＆＃13;

div.image {
  height: 300px;
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
div.image::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s;
}

div.image:hover::before {
  transform: scale(1.25);       /* 25% increase */
}
div.text {
  position: relative;           /* so text stay ontop of image */
}

＆＃13;

<div class="image" style="background-image: url(http://lorempixel.com/200/200/nature/1/)">
  <div class="text">
    <p class="title">TITLE</p>
    <p class="subtitle">SUBTITLE</p>
  </div>
</div>

＆＃13;

Answer 4

$(function(){
   $('.image').hover(function(){
   $(this).animate({height: '500px', opacity: '0.8'}, "slow");
   $(this).animate({width: '500px', opacity: '0.8'}, "slow");
   });
});

我认为动画可以像这样应用。希望这就是你所问的。

jQuery - background-size：封面+一些百分比

4 个答案: