Question

这是我的问题，我已经按照自己的意愿成功编码了我的自举卡，但是一些小细节让我很难过。

我想确保“变换比例”不考虑按钮'infos'和'mods'

只有我能抓挠我的脑袋，尝试各种各样的事情，我无法摆脱这个过程。

这是CSS＆amp; HTML代码。

 <div class="card-deck row">

<div class="col-3"><!--event serv-->
  <div class="card">
    <div class="card bg-inverse">
     <div class="card-block card-inverse event serv">
     <h5>Special event</h5><p class="lead">PVP / PVE</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>
</div><!--/event serv-->

 <div class="col-6"><!--island serv-->
  <div class="card">
    <div class="card bg-inverse">

     <div class="card-block card-inverse island serv">
     <h5>The island</h5><p class="lead">PVE x 3</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>
 </div><!--/island serv-->

 <div class="col-3"><!--scorched serv-->
  <div class="card">
    <div class="card bg-inverse">
     <div class="card-block card-inverse scorched serv">
     <h5>Scorched earth</h5><p class="lead">PVE x 3</p>
     <a href="#" class="btn btn-sm btn-secondary">Infos</a>
     <a href="#" class="btn btn-sm btn-primary">Mods</a>
     </div>
    </div>
  </div>                                
</div><!--/scorched serv--> 
</div>

CSS：

.event{background-image: url(https://images2.alphacoders.com/819/819763.jpg);background-size:cover;background-position: center;}

    .island{
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
    background-size:cover;
    background-position: center;
    }

    .scorched{
    background-image: url(https://images4.alphacoders.com/819/819770.jpg);
    background-size:cover;
    background-position: center;}

    .card{overflow:hidden;}

    .serv{position:relative;}

    .serv:hover{transform:scale(1.1);transition:all 0.7s;}

有人知道我的问题来自哪里？非常感谢你！

Answer 1

https://www.w3schools.com/css/css_pseudo_classes.asp

使用：不是（a）在.serv中进行翻译。这应该有用。

Answer 2

如果您只想缩放图片，请将background移动到::after的{{1}}伪元素，将伪元素设为负值.serv，这样就可以了文本，定位伪元素z-index，将转换移至absolute，而不是仅移至.serv::after的{{1}}伪类，并在:hover上移动.serv {1}}代替transform: scale()。

.serv::after

.serv

或者，如果您使用的是bootstrap 4，请.event::after { background-image: url(https://images2.alphacoders.com/819/819763.jpg); background-size: cover; background-position: center; } .island::after { background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg); background-size: cover; background-position: center; } .scorched::after { background-image: url(https://images4.alphacoders.com/819/819770.jpg); background-size: cover; background-position: center; } .card { overflow: hidden; } .serv { position: relative; } .serv::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; transition: transform 0.7s; } .serv:hover::after { transform: scale(1.1); } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="card-deck row"> <div class="col-3">  <div class="card"> <div class="card bg-inverse"> <div class="card-block card-inverse event serv"> <h5>Special event</h5> <p class="lead">PVP / PVE</p> <a href="#" class="btn btn-sm btn-secondary">Infos</a> <a href="#" class="btn btn-sm btn-primary">Mods</a> </div> </div> </div> </div>  <div class="col-6">  <div class="card"> <div class="card bg-inverse"> <div class="card-block card-inverse island serv"> <h5>The island</h5> <p class="lead">PVE x 3</p> <a href="#" class="btn btn-sm btn-secondary">Infos</a> <a href="#" class="btn btn-sm btn-primary">Mods</a> </div> </div> </div> </div>  <div class="col-3">  <div class="card"> <div class="card bg-inverse"> <div class="card-block card-inverse scorched serv"> <h5>Scorched earth</h5> <p class="lead">PVE x 3</p> <a href="#" class="btn btn-sm btn-secondary">Infos</a> <a href="#" class="btn btn-sm btn-primary">Mods</a> </div> </div> </div> </div>  </div> </div> .serv，使其高于z-index，因为这将指定深色背景颜色并涵盖.card.bg-inverse {{ 1}}图片。

.serv::after

background

在引导卡中转换图像

2 个答案: