我想要div的渐变底色。如下图所示。如果可以在css3中使用,或者应该使用图像。
任何有用的帮助。
答案 0 :(得分:4)
是和否。
是的,这是可能的。像http://www.colorzilla.com/gradient-editor/这样的工具可以轻松创建CSS3代码。例如,这就是你想要的:http://www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100;Custom
不,你应该总是有一个渐变的渐变图像。并非所有浏览器都支持它,并非所有浏览器都支持它。
答案 1 :(得分:0)
这将仅在元素的底部创建渐变,并且不会随元素的高度拉伸。它是固定的100px
。
.style {
padding-bottom:100px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-position: center bottom;
background-size: 100px 100px;
background-repeat: repeat-x;
}