最佳 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;
}

这是可能的，但我不能在这个项目中使用这个致命的（哈哈）selector，所以什么是正确的（那些 select less childrens of the背景图像容器，但在调整大小时会转换背景）？

$(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

最佳 css 选择器在调整大小时在背景上过渡

optimal css selector in transition on background when resized

css

background

resize

css-transitions