Question

我继承了一个网站，我无法修改HTML或Javascript。我只能编辑CSS文件。

该网站有很多html组件描述了公司的团队成员，提供的服务，照片库等......

该网站使用CSS Grid进行大量布局。

为了简单起见，我将创建一些代码来演示我即将遇到的问题。这是代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
<style type="text/css">
.our-team {
  width:100%;
  height:300px;
  display:grid;
  grid-template: 50% 50%/30% 15% 15% 40%;
}
.our-team h2 {
  grid-column:1/2;
  grid-row:1/2;
}
.our-team p {
  grid-column:1/2;
  grid-row:2/3;
}
.our-team .img-container:nth-child(3) {
  grid-column:2/4;
  grid-row:1/3;
  z-index:1;
}
.our-team .img-container:nth-child(4) {
  grid-column:3/5;
  grid-row:1/2;
  margin-top:50px;
  z-index:2;
}
.img-window {
  opacity:0;
  width:0;
  height:100%;
  overflow:hidden;
  transition:opacity 2s ease, width 2s ease;
}
.activate .img-window {
  opacity:1;
  width:100%;
}
img {
  width:100%;
  height:100%;
  display:block;
}
</style>
<script type="text/javascript">
function toggleImage() {
  var imglist = document.querySelectorAll('.img-container');
  for(var c=0;c<imglist.length;c++) {
    if(imglist[c].className.match(/activate/))
      imglist[c].className='img-container';
    else
      imglist[c].className='img-container activate';
  }
}
</script>
  </head>
  <body>
    <div>
      <button onClick="toggleImage();">toggle</button>
      <div class="our-team">
        <h2>Our Team</h2>
        <p>We like to look to brush our teeth with tooth paste</p>
        <div class="img-container">
          <div class="img-window">
            <img src="https://i.stack.imgur.com/FBb4v.png" />
          </div>
        </div>
        <div class="img-container">
          <div class="img-window">
            <img src="https://i.stack.imgur.com/FBb4v.png" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

现在，当您按下toggle按钮时，一些以精美方式布置的图像（即不是任何传统的自举网格系统）将会褪色并滑开。

以下是问题：您会注意到，当淡入视图时网格中的方块正在扩展，并且当淡出视图时网格中的方块正在压缩。我不希望这种压缩和扩展行为。

如果我被允许引入javascript代码（我没有）并且我可以编辑CSS代码（我可以），我会做这样的事情。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
<style type="text/css">
.our-team {
  width:100%;
  height:300px;
  display:grid;
  grid-template: 50% 50%/30% 15% 15% 40%;
}
.our-team h2 {
  grid-column:1/2;
  grid-row:1/2;
}
.our-team p {
  grid-column:1/2;
  grid-row:2/3;
}
.our-team .img-container:nth-child(3) {
  grid-column:2/4;
  grid-row:1/3;
  z-index:1;
}
.our-team .img-container:nth-child(4) {
  grid-column:3/5;
  grid-row:1/2;
  margin-top:50px;
  z-index:2;
}
.img-window {
  opacity:0;
  width:0;
  height:100%;
  overflow:hidden;
  transition:opacity 2s ease, width 2s ease;
}
.activate .img-window {
  opacity:1;
  width:100%;
}
img {
  height:100%;
  display:block;
}
</style>
<script type="text/javascript">
function toggleImage() {
  var imglist = document.querySelectorAll('.img-container');
  for(var c=0;c<imglist.length;c++) {
    imglist[c].querySelectorAll('img')[0].style.width = imglist[c].offsetWidth+"px";
    if(imglist[c].className.match(/activate/))
      imglist[c].className='img-container';
    else
      imglist[c].className='img-container activate';
  }
}
</script>
  </head>
  <body>
    <div>
      <button onClick="toggleImage();">toggle</button>
      <div class="our-team">
        <h2>Our Team</h2>
        <p>We like to look to brush our teeth with tooth paste</p>
        <div class="img-container">
          <div class="img-window">
            <img src="https://i.stack.imgur.com/FBb4v.png" />
          </div>
        </div>
        <div class="img-container">
          <div class="img-window">
            <img src="https://i.stack.imgur.com/FBb4v.png" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

我只做了两次改动。我删除了css中指定的图像的宽度（即删除img {width:100%}），我引入了一行javascript代码来为图像指定绝对宽度（即。imglist[c].querySelectorAll('img')[0].style.width = imglist[c].offsetWidth+"px";）。

现在，当您按下切换按钮时，网格图像不具有该扩展和压缩行为。

如何在不修改HTML或Javascript的情况下实现类似的行为？我希望图像在没有任何偏斜效果的情况下淡入幻灯片。我唯一需要处理的是：

我知道.activate类会被其他一些不受我限制的JS代码添加到.img-container
我只能修改CSS文件

大部分网站都是使用这种CSS网格结构构建的。所以我想尽可能避免重写现有的CSS代码。

如何在不影响CSS Grid布局的情况下淡化图像中的幻灯片？

0 个答案: