CSS如何实现背景图放大，而内容不放大

Question

 <div>
                <a href="#">
                    <h1>企业品牌网站建设</h1>
                    <h2>Enterprise web sit construction</h2>
                    <p>增强企业品牌感</p>
                    <p>提升品牌隐性价值</p>
                </a>
            </div>

div:hover{
    background-image: url(/img/service_1.jpg) ;
    transform: scale(2);
}

如题，上面是我的代码，我在css里为其设置了一个背景图，然后设置放大，但是内部文字也跟着放大了，请问，如何只让背景图放大，内部内容都不放大

专们注册账号来问这个问题，求热心大佬解答！

Answer 1

CSS 的 background 其实是一个复合属性，其中的 background-size 控制背景的宽高，可以用像素也可以用百分比，用百分比的时候效果看起来就相当于 scale 了，并且这个背景属性的修改不会影响元素的其他属性。

Answer 2

因为你的 transform 加在容器上，自然是整个容器，包括里面的文字和背景图一起放大。

解决方案有很多，这里我觉得比较简单的做法是：

div
  position relative
  
  > *
    position relative
    z-index 2
    
  .bg
    position absolute
    z-index 1
    top 0
    left 0
    width 100%
    height 100%
    
  &:hover .bg   
    transform scale(1.5)