Question

为网站收到两列布局设计。每列都有一个透明的背景，组合在一起形成一个弯曲的切口。

我需要列与内容一起增长，但是当在background-size：cover上设置时，这会使背景图像失真（匹配事情以便使用repeat-y赢得了工作）。有没有一个很好的方法来实现这一点，或者一种方法告诉他绝对没有？

.middle-left-container {
  float: left;
  min-height: 500px;
  position: relative;
  left: 0;
  bottom: 0;
  background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png');
  background-repeat: no-repeat;
  background-size: cover;

  width: 20%;
}

body:not(.home) .middle-left-container {
 top: 0;
 background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png');
}


.middle-right-container {
 float: left;
 min-height: 500px;
 position: relative;
 top: 0;
 right: 0;
 bottom: 0;
 background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png');
 background-repeat: no-repeat;
 background-size: 100% 100%;
 height: 100%;
 width: 80%;
}

body:not(.home) .middle-right-container {
  background-image: none;
  background-color: #fff;
}

谢谢，马特

Answer 1

不要将弯曲的bg图像放在<body>上，将其放在固定宽度的容器上，然后锚定bg-image位置。

.container {
    width:900px;
    margin:0 auto;
    background-position: top center;
    ...
}

然后在该容器内放置每个列容器。类似的东西：

<div class="container">
    <div class="sidebar-nav"> ... </div>
    <div class="middle-left-container"> ... </div>
    <div class="middle-right-container"> ... </div>
</div>

CSS透明剪裁

1 个答案: