[英]CSS background color and png image
它可能需要解决方法或要实现的其他元素,但无论如何我都会提出。
我有一个简单的形象。 图像被对角分为两部分。 顶部是纯色,底部是透明的。 如果我应用以下代码,则背景色将填充图像的透明度。 有没有一种方法可以定位颜色或不通过我的图像区域显示颜色,而是仅填充元素的其余部分?
#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);
}
这是一个演示 。
您会注意到我使用了Sass和Compass。 不同的渐变语法是一场噩梦,但是使用Sass和Compass,您所要做的就是:
body
+background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))
它将为您编译所有供应商前缀和不同的旧语法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.