文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏背景颜色溢出HTML/CSS

问隐藏背景颜色溢出HTML/CSS
EN

Stack Overflow用户

提问于 2021-01-05 17:10:26

回答 3查看 288关注 0票数 0

我试图把一个背景颜色的形状，像一个大的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

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-01-05 17:39:18

这个问题有点不清楚，但是这里有一些提示:绝对定位(背景)元素应该是主元素的子元素。然后可以将position: relative;、overflow: hidden;和可选的固定height应用于main元素(在下面的示例中是.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

Stack Overflow用户

发布于 2021-01-05 17:36:54

如果“大边距”指的是形状延伸到视图端口，并出现滚动条，那么您应该在父元素上设置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

Stack Overflow用户

发布于 2021-01-05 18:14:14

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65583448

复制

相似问题

问隐藏背景颜色溢出HTML/CSS
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏背景颜色溢出HTML/CSSEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏背景颜色溢出HTML/CSS
EN