它可能需要解决方法或额外的元素才能实现,但我还是会问。
我有一个简单的图像。图像沿对 Angular 线一分为二。顶部是纯色,底部是透明的。如果我应用以下代码,背景颜色会填充图像的透明度。有没有一种方法可以定位颜色,或者不让它显示在我的图像区域所在的位置,而是只填充元素的其余部分?
#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;
}
最佳答案
使用 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);
}
这是一个demo .
您会注意到我使用了 Sass 和 Compass。不同的渐变语法是一场噩梦,但使用 Sass 和 Compass,您只需编写:
body
+background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))
它会为您编译所有供应商前缀和不同的遗留语法。
关于CSS 背景颜色和 png 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12957163/