입력란의 배경이 여러 개인 경우

Question

배경이 여러 개있는 경우 (1. #fff, 2) img 3) 그라데이션 배경을 사용하려고합니다. 그러나

여기

내 출력 그것은 CSS3에 그라디언트 this article에서 보인다

<div id="send-date" class="transaction-details"> 
     <label for="date">Send on</label> 
     <input type="date" name="date" id="date"/> 
</div><!-- /send-date --> 

#send-date input { 
    background: #fff, 
       url(../img/icon_calendar_36x36.png), 
       linear-gradient(btop, #FFFFFF 30%, #BFCBFB 65%, #869CFF 100%); 
    background-repeat: no-repeat; 
    background-position: 0% 0%, 96% 50%, 0% 0%; 
    background-size: cover, 24px, cover; 
    border: 1px solid #d9d9d9; 
    text-shadow: none; 
} 

#send-date input.ui-focus{ 
    background-image: url(../img/icon_calendar_36x36.png); 
    background-repeat: no-repeat; 
    background-position: 96% 50%; 
    background-size: 24px; 
    border: 1px solid #a18492; 
    background-color: #d9d9d9; 
    -moz-box-shadow: inset 2px 2px 8px #AAAAAA; 
    -webkit-box-shadow: inset 2px 2px 8px #AAAAAA; 
    box-shadow: inset 2px 2px 8px #AAAAAA; 
} 

DEMO

Answer 1

가 생성

코드 샘플과 같이해야하는지의입니다 작동하지 않는 것 이미지로 사용되며 url (foobar) 대신 사용할 수 있습니다.

그래서 내 생각에 그들은 같은 요소의 이미지와 너무 잘 어울리지 않을 수 있습니다.

이미지로 배경 그라데이션에 투명한 오버레이를 사용해보십시오. 또는 다른 방법.