Question

我目前的CSS是

background: -moz-linear-gradient(top,  rgba(47,163,216,0.85) 0%, rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,163,216,0.85)), color-stop(100%,rgba(47,163,216,0.85))),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* IE10+ */
background: linear-gradient(to bottom,  rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92fa3d8', endColorstr='#d92fa3d8',GradientType=0 ),
url(http://i.imgur.com/HS5coix.jpg); /* IE6-9 */
background-position:center;

问题是background-position没有将背景图像格式化为居中。可能是background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%), url(http://i.imgur.com/HS5coix.jpg) center;之类的东西？希望你能帮忙！

Answer 1

您是否尝试过设置background-position: center center;？此解决方案适用于此处：Background Image won't center in IE 9

Answer 2

我害怕我刚回答了自己的问题。解决方案是url(http://i.imgur.com/HS5coix.jpg)50%;。很抱歉给您带来不便，感谢您的帮助！

使用渐变内联居中背景图像

2 个答案: