是否有可能具有渐变背景+背景图片

我试图将箭头图像添加到我的链接并将其定位到中间位置。我的链接也有一个背景渐变，以及即时尝试应用背景图像的这适用于右侧。是否有可能具有渐变背景+背景图片

CSS

#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; 
    }

来源

2012-06-27 davey

是有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; 
}

来源

2012-06-27 09:46:03 sandeep

你可以（也应该）使用:before和:after伪元素来实现这种效果。

这里有一个Great article on the subject!

来源

2012-06-27 09:43:22

是否有可能具有渐变背景+背景图片

回答

相关问题