(.date) 텍스트 배경색을 그라디언트 (페이드 아웃)로 만드는 방법은 무엇입니까?

현재 텍스트 상자 너비에 걸쳐 "날짜"뒤에 텍스트 배경색이 있습니다. 이 부분을 추가하여 오른쪽에 희미 해지기를 바랍니다. 그러나 이것을 추가하면 텍스트가 그라디언트가되고 배경은 사라집니다.(.date) 텍스트 배경색을 그라디언트 (페이드 아웃)로 만드는 방법은 무엇입니까?

background-color:-webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#55565a), color-stop(80%, #55565a));

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500; 
    color: white; 
    margin-top: 9px; 
    opacity: 0.7; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    background-color: #adadad; 
    padding:10px; 
    margin-left:-41px; 
    margin-right:-41px; 
    padding-left:30px; 
    display : block; 
}

UPDATE :

밝은 파란색 줄무늬 :이 같은

hr { 
margin-top: 10px; 
width: 100%;  
color: #B7C3E6; 
background-color: white; 
height: 25px; 
margin: 0px auto; 
opacity: 0.2; 
border: none; 
background: -webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#B7C3E6), color-stop(80%, #B7C3E6));

}

출처

2013-08-09 Jeff Dowell

뭔가?

jsFiddle

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500; 
    color: white; 
    margin-top: 9px; 
    opacity: 0.7; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    background-color: #adadad; 
    padding:10px; 
    margin-left:-41px; 
    margin-right:-41px; 
    padding-left:30px; 
    display : block; 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIwLjE4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(left, rgba(173,173,173,1) 0%, rgba(173,173,173,0.18) 82%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(173,173,173,1)), color-stop(82%,rgba(173,173,173,0.18)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#adadad', endColorstr='#00ffffff',GradientType=1); /* IE6-8 */ 

}

사용 CSS Gradient Generator 그라디언트를 생성합니다.

출처

2013-08-09 16:34:55 Shivam

와우, 그게 CSS를 많이. URL은 무엇입니까? 그래서 시작 색을 변경하려면, 이것은 나를 어렵게 만듭니다. Im Noob, 미안. –

내 사이트에서이 밝은 파란색 줄무늬가 다른 브라우저로 전송되지 않습니까? –

@Jeff Dowell 언급 한 것처럼 URL은 교차 브라우저 CSS 그래디언트를 생성합니다. 그것을 아주 간단하게 확인하십시오. 원하는대로 색상을 사용자 정의 할 수 있습니다 :-) – Shivam

(.date) 텍스트 배경색을 그라디언트 (페이드 아웃)로 만드는 방법은 무엇입니까?

답변

관련 문제