div의 그라디언트 바닥색

Question

div의 그라데이션 바닥색을 원했습니다. 아래 이미지와 같습니다. css3에서 가능하거나 이미지를 사용해야합니다.

도움이 되었습니까?

Answer 1

예와 아니요

예, 가능합니다. http://www.colorzilla.com/gradient-editor/ 같은 도구를 사용하면 CSS3 코드를 쉽게 만들 수 있습니다. 예를 들어, 이것은 당신이 원했던 것과 같습니다. http://www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100;Custom

아니요, 그래디언트에는 항상 후진 이미지가 있어야합니다. 모든 브라우저가이 기능을 지원하는 것은 아니며 모두가 동등하게 지원하는 것은 아닙니다.

Answer 2

이것은 요소의 아래쪽에만 그라디언트를 만들고 요소의 높이로 늘리지 않습니다. 고정 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; 
}