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

【问题标题】：Centering a background image with a gradient inline使用渐变内联使背景图像居中
【发布时间】：2013-12-08 17:42:50
【问题描述】：

我现在的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; 之类的东西？希望你能帮忙！

【问题讨论】：

据我所见，它似乎居中，也许您可以提供您正在运行的 html。您也可以尝试设置 background-position: 50%;看看能不能解决问题。

标签： css background gradient transparent background-position

【解决方案1】：

你试过设置background-position: center center;吗？这个解决方案在这里工作：Background Image won't center in IE 9

【讨论】：

【解决方案2】：

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

【讨论】：