배경 이미지 및 그라데이션 배경을 추가하는 방법

Question

CSS의 그라데이션 배경에 배경 이미지를 어떻게 추가합니까? 여기 내 코드

input.button-add { 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    color: #ffffff; 
    padding: 4px 4px; 
    background: -moz-linear-gradient(
     top, 
     #ff2819 0%, 
     #ff0d0d); 
    background: -webkit-gradient(
     linear, left top, left bottom, 
     from(#ff2819), 
     to(#ff0d0d)); 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #ffffff; 
    -moz-box-shadow: 
     0px 1px 1px rgba(000,000,000,0.5), 
     inset 0px 0px 2px rgba(255,255,255,0.7); 
    -webkit-box-shadow: 
     0px 1px 1px rgba(000,000,000,0.5), 
     inset 0px 0px 2px rgba(255,255,255,0.7); 
    box-shadow: 
     0px 1px 1px rgba(000,000,000,0.5), 
     inset 0px 0px 2px rgba(255,255,255,0.7); 

가능한가요?

Answer 1

왜 안 되니? 그냥 background-image을 쉼표로 구분하여 원하는만큼 추가하십시오 (그래디언트도 이미지 임). 또한 모두에 대해 background-position 및 background-repeat을 지정하십시오. 여기

하나의 배경 이미지와 하나 그라데이션 배경 코드입니다 : "그것이 가능"

input.button-add { 
 
    color: #ffffff; 
 
    padding: 4px 4px; 
 
    border: 1px solid #ffffff; border-radius: 5px; 
 
    display: inline-block; 
 
    width: 120px; height: 64px; 
 
    box-shadow: 0px 1px 1px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7); 
 

 
    background-image: 
 
     url('http://lorempixel.com/16/16'), 
 
     -webkit-gradient(linear, left top, left bottom, from(#ff2819), to(#fff)); 
 
    
 
    background-position: 4px center, center center; 
 
    background-repeat: no-repeat, no-repeat; 
 

 
}

<input id="btn" type="button" value="Click Here" class="button-add" />