隐藏背景颜色溢出 HTML/CSS

问题描述 投票：0回答：3

我正在尝试放置一个背景颜色形状，例如在我的网站背景上旋转一个大div，但问题是当我将这个背景放置在我想要的位置时，它会为我创建一个很大的右边和底部边距（因为我为放置背景而创建的 div 的末尾）

这是我所做的：

.fill-2{
    position: absolute;
    top: 45%;
    width: 100%;
    z-index: -2;
    background-color: #A08823;
    opacity: 30%;
    height: 200vh;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);  
} 
<body>
    <div class="fill-1"></div>
    <div class="container">
        <!-- my content -->
    </div>
    <div class="fill-2"></div>
</body>

html css background background-color
3个回答
1
投票

问题有点不清楚，但这里有一些提示： 绝对定位（背景）元素应该是主元素的 child 元素。然后，您可以将 

position: relative;
、
overflow: hidden;
以及可选的固定 
height
应用于主元素（在下面的示例中为 
.container
），这将隐藏超出主元素的背景部分：

.fill-2 {
  position: absolute;
  top: 45%;
  width: 100%;
  z-index: -2;
  background-color: #A08823;
  opacity: 30%;
  height: 200vh;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.container {
  height: 300px;
  position: relative;
  overflow: hidden;
}
<body>
  <div class="fill-1"></div>
  <div class="container">
    <!-- my content -->
    <div class="fill-2"></div>
  </div>
</body>

0
投票

如果“大边距”是指形状延伸到视口上并且出现滚动条，那么您应该在父元素上设置 

overflow: hidden;
，在您的情况下为 
<body>
，如下所示：

.fill-2 {
  position: absolute;
  top: 45%;
  width: 100%;
  z-index: -2;
  background-color: #a08823;
  opacity: 30%;
  height: 200vh;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

body {
  overflow-x: hidden;
}
<body>
  <div class="fill-1"></div>
  <div class="container">
    <!-- my content -->
  </div>
  <div class="fill-2"></div>
</body>

0
投票

添加溢出：隐藏； 我希望这会起作用！ 干杯！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.