CSS背景颜色和PNG图像

它可能需要一个解决方法，或额外的元素来实现，但我会问无论如何。CSS背景颜色和PNG图像

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

#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; 
}

来源

2012-10-18 Jared Eitnier

这会有点难 - 仅使用'background'属性，您将无法控制背景颜色开始位置和背景图像的位置。您可能必须使用一个或多个独立的子元素，而不是伪元素。或者也许你可以尝试使用'：before'和'：after';一个用于图像，另一个用于背景颜色，但无论哪种方式，您都必须考虑定位每一个。 – BoltClock

这就是我的想法，但从不伤害问！感谢您的输入。 –

@BoltClock我认为这将是一个CSS3渐变的好地方。看到我的答案。 – bookcasey

使用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。不同的梯度语法是一场噩梦，但萨斯和指南针，你必须写的是：

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

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

来源

2012-10-18 14:56:43 bookcasey

非常甜蜜，我要检查一下......它将如何与IE 8和9交互？ –

CSS背景颜色和PNG图像

回答

相关问题