2012-06-27 6 views
0

화살표 이미지를 내 링크에 추가하고 중간에 위치 시키려고합니다. 내 링크에는 배경 그라데이션이 있고 오른쪽에 적용된 배경 이미지를 적용하려고합니다.그래디언트 + 배경 이미지가있는 배경을 가질 수 있습니까?

당신은 (그리고해야한다) 등의 효과를 달성하기 위해 :before:after 의사 요소를 사용할 수 있습니다

#nav a.linkchildflyout:link, 
    #nav a.linkchildflyout:active, 
    #nav a.linkchildflyout:visited 
    { 
     display:block; 
     padding:0px 5px; 
     text-decoration:none; 
     background: #b95d73; /* Old browsers */ 
     background: -moz-linear-gradient(top, #b95d73 0%, #970e2e 0%, #9c1a38 0%, #910022 52%, #b95d73 100%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b95d73), color-stop(0%,#970e2e), color-stop(0%,#9c1a38), color-stop(52%,#910022), color-stop(100%,#b95d73)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* IE10+ */ 
     background: linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b95d73', endColorstr='#b95d73',GradientType=0); /* IE6-9 */ 
     color: white; 
    } 

    #nav a.linkchildflyout 
    { 
     background-image: url(Images/arrow.png); 
     background-position: right center; 
     background-repeat: no-repeat; 
    } 

답변

1

예가 CSS3 여러 배경 속성입니다. 당신은 다음과 같이 쓸 수 있습니다 :

#nav a.linkchildflyout{ 
background:linear-gradient(top, #b95d73 0%, #970e2e 0%, #9c1a38 0%, #910022 52%, #b95d73 100%),url(Images/arrow.png) no-repeat right center; 
} 

http://www.css3.info/preview/multiple-backgrounds/

이 읽기
관련 문제