我在页面上生成渐变。如何将图像叠加在此功能区的中央?我需要将图像居中,我似乎无法弄清楚如何使这项工作。我正在使用bootstrap,页面响应。因此,当页面变小时,它需要保持在一起。任何帮助表示赞赏!
期望的结果:
#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;
}

<div id="ribbon-background"></div>
&#13;
答案 0 :(得分: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%);
}
&#13;
<div id="ribbon-background">
<img id="ribbon-overlay-img" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png">
</div>
&#13;