1

它可能需要一种解决方法或额外的元素来实现，但我还是会问。

我有一个简单的图像。图像沿对角线分成两部分。顶部是纯色，底部是透明的。如果我应用以下代码，背景颜色会填充图像的透明度。有没有办法定位颜色或不让它显示在我的图像区域的位置，而只是填充元素的其余部分？

#content:before {
    position: absolute;
    z-index: -1;
    bottom: -35px;
    content: "";
    width: 35px;
    height: 465px;
    left: -35px;
    background: #121314 url(library/images/content-fold-left.png) 0 bottom no-repeat;
}
4

1 回答 1

1

使用 CSS3 渐变：

html, body {
  height: 100%;
}

body {
  background: -webkit-gradient(linear, 50% 0%, 50% 100, color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, #fa8072));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
}

这是一个演示。

你会注意到我使用了 Sass 和 Compass。不同的渐变语法是一场噩梦，但是使用 Sass 和 Compass，你所要做的就是：

body
  +background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))

它将为您编译所有供应商前缀和不同的旧语法。

于 2012-10-18T14:56:43.997 回答