不确定如何正确定位图像上的梯度

Question

我在页面上生成渐变。我怎样才能在这个功能区的中心叠加一个图像？我需要以图像为中心，我似乎无法弄清楚如何使这项工作。我使用引导程序，页面响应。所以当页面变小时，它需要保持在一起。任何帮助表示赞赏！

所需的结果：

#ribbon-background { 
 
\t background: #ed1c24; /* Old browsers */ 
 
\t background: -moz-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); /* FF3.6-15 */ 
 
\t background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed1c24), color-stop(50%,#600000), color-stop(100%,#ed1c24)); /* Chrome4-9,Safari4-5 */ 
 
\t background: -webkit-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Chrome10-25,Safari5.1-6 */ 
 
\t background: -o-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Opera 11.10-11.50 */ 
 
\t background: -ms-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* IE10 preview */ 
 
\t background: linear-gradient(to right, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#ed1c24',GradientType=1); /* IE6-9 */ 
 
\t border-top: 3px solid #000; 
 
\t border-bottom: 3px solid #000; 
 
\t box-shadow: 0 7px 0 #FFF inset, 
 
\t \t \t \t 0 -7px 0 #FFF inset; 
 
    height: 65px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
\t z-index: 99; 
 
}

<div id="ribbon-background"></div>

Answer 1

做到这一点的方法之一是给带一个position: relative;和后续样式添加到一个孩子<img>：

position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

演示：

#ribbon-background { 
 
    background: #ed1c24; 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ed1c24), color-stop(50%, #600000), color-stop(100%, #ed1c24)); 
 
    /* Chrome4-9,Safari4-5 */ 
 
    background: -webkit-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: -o-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); 
 
    /* Opera 11.10-11.50 */ 
 
    background: -ms-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); 
 
    /* IE10 preview */ 
 
    background: linear-gradient(to right, #ed1c24 0%, #600000 50%, #ed1c24 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#ed1c24', GradientType=1); 
 
    /* IE6-9 */ 
 
    border-top: 3px solid #000; 
 
    border-bottom: 3px solid #000; 
 
    box-shadow: 0 7px 0 #FFF inset, 0 -7px 0 #FFF inset; 
 
    height: 65px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    z-index: 99; 
 
    position: relative; 
 
} 
 

 
#ribbon-overlay-img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div id="ribbon-background"> 
 
    <img id="ribbon-overlay-img" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"> 
 
</div>