时间戳

首页 > 解决方案 > 使用透明时可以忽略 div 吗？

html - 使用透明时可以忽略 div 吗？

问题描述

使用透明度时可以忽略 div 吗？imgur.com/a/gvf1ek3 //没有足够的声誉:(

我想让灰色区域透明，这样你就可以看到渐变。

还有你有什么建议，我怎样才能让我的过渡更顺利？我是编程新手。提前致谢

body {
  background-color: white
}

.timelineElementInnen {
  z-index: 3;
  background-color: white;
  border-radius: 50px;
  height: 100px;
  width: 100px;
}

.timelineElementMitte {
  z-index: 2;
  border-radius: 50px;
  background-color: gray;
  _background-color: rgba(255, 255, 255, 0.5);
  transition: 1000ms;
  width: 100px;
  height: 100px;
  padding: 0px
}

.timelineElementMitte:hover {
  padding: 25px;
  border-radius: 75px;
}

.timelineElementAußen {
  z-index: 1;
  border-radius: 50px;
  background-color: white;
  transition: 1000ms;
  width: 100px;
  height: 100px;
  padding: 0px;
  margin: 50px;
}

.timelineElementAußen:hover {
  width: 150px;
  height: 150px;
  padding: 25px;
  border-radius: 100px;
  margin: 0px;
}
<html>

<head>
</head>

<body>
  <div style="margin: 100px; background: linear-gradient(to right,red, gray); width: 400px; height: 400px;">
    <div style="padding: 100px">
      <div class="timelineElementAußen">
        <div class="timelineElementMitte">
          <div class="timelineElementInnen"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

标签： htmlcss

解决方案

不，您不能忽略 div，但在您的情况下，一个简单的解决方法是根本不在中间 div 上使用背景颜色，然后为外部元素的边框着色而不是背景颜色：

  • .timelineElementMitte：将背景更改为background-color: none（或将其删除）。
  • .timelineElementAußen：删除background-color，添加border: 0 solid white
  • .timelineElementAußen:hover：删除padding，添加border-width: 25px

body {
  background-color: white
}

.timelineElementInnen {
  z-index: 3;
  background-color: white;
  border-radius: 50px;
  height: 100px;
  width: 100px;
}

.timelineElementMitte {
  z-index: 2;
  border-radius: 50px;
  background-color: none; /* replaces background-color: gray; */
  transition: 1000ms;
  width: 100px;
  height: 100px;
  padding: 0px;
}

.timelineElementMitte:hover {
  padding: 25px;
  border-radius: 75px;
}

.timelineElementAußen {
  z-index: 1;
  border-radius: 50px;
  transition: 1000ms;
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0 solid white; /* replaces background-color: white; */
  margin: 50px;
}

.timelineElementAußen:hover {
  width: 150px;
  height: 150px;
  border-radius: 100px;
  border-width: 25px; /* replaces padding: 25px; */
  margin: 0px;
}
<html>

<head>
</head>

<body>
  <div style="margin: 100px; background: linear-gradient(to right,red, gray); width: 400px; height: 400px;">
    <div style="padding: 100px">
      <div class="timelineElementAußen">
        <div class="timelineElementMitte">
          <div class="timelineElementInnen"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

推荐阅读