css - 调整大小时在背景上转换的最佳 css 选择器

Question

$(function(){
  $('div').click(function(){
   $('h3').toggleClass('collapsed');
  });
});

div {
  background: url('http://deiaactivity.com/wp-content/uploads/2015/01/bgimage2.jpg');
  background-size:cover;
  padding: 2em;
}
h3 {
  padding: 12em 1em;
  background: rgba(255,255,255,.5);
  text-align: center;
  color: white;
}
h3.collapsed {
  padding: 6em 1em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>Click me!</h3>
</div>

有什么方法可以在调整背景图像大小时产生过渡效果吗？

-编辑-

我现在添加，测试

* {
   transition: 1s linear all;
}

这是可能的，但我不能在这个元素中使用这个致命的(哈哈)选择器，所以什么是正确的选择器(选择较少背景图像容器的 child ，但在调整背景时转换背景)?

$(function(){
  $('div').click(function(){
   $('h3').toggleClass('collapsed');
  });
});

* {
    transition: 1s linear all;
}
div {
  background: url('http://deiaactivity.com/wp-content/uploads/2015/01/bgimage2.jpg');
  background-size:cover;
  padding: 2em;
}
h3 {
  padding: 12em 1em;
  background: rgba(255,255,255,.5);
  text-align: center;
  color: white;
}
h3.collapsed {
  padding: 6em 1em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>Click me!</h3>
</div>

Answer 1

尝试像这样编辑 CSS 规则:

h3 {
  padding: 12em 1em;
  background: rgba(255,255,255,.5);
  text-align: center;
  color: white;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
            transition: all .25s ease;
}

这里是 FIDDLE