Question

我有以下HTML代码：

<div class="test">
    <img src="http://www.luzchem.com/images/up1.jpg"/>
</div>

使用这个CSS：

.test 
{
    position: relative;
    /* font-size: 30px; */
    /* z-index: 1; */
    overflow: hidden;
    text-align: center;
}
.test:before, .test:after 
{
    position: absolute;
    overflow: hidden;
    width: 50%;
    height: 100%;
    content: '\a0';
    /* background-color: red; */
}
.test:before 
{
    margin-left: -50%;
    background: -webkit-linear-gradient(left, blue, white); /* For Safari */
    background: -o-linear-gradient(right, blue, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, blue, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, blue, white); /* Standard syntax (must be last) */
}
.test:after
{
    background: -webkit-linear-gradient(left, white, blue); /* For Safari */
    background: -o-linear-gradient(right, white, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, white, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, white, blue); /* Standard syntax (must be last) */
}

它完全符合我想要的Firefox和Chrome，但在Safari中表现不佳（左侧渐变缺失），Opera（图像右侧的蓝色条）和IE（左侧渐变缺失，蓝色条向右）。我创建了以下JSFiddle来帮助：

http://jsfiddle.net/BigMac66/5rmAQ/4/

必须采取哪些措施让它在所有浏览器中都能像在Firefox和Chrome中一样工作？

更新：最终的解决方案不必在之前和之后使用伪元素。我考虑过使用三个DIV ......

Answer 1

从我看到的我没有找到任何漂亮的解决方案，也许你可以使用条件css，至少会有你期望的结果

Answer 2

如何更简单的事情。这是fiddle。

<div class="wrap"><img src="http://placehold.it/100" alt="fpo" /></div>

.wrap {
    text-align: center;
    line-height: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), color-stop(0.5, transparent), to(blue));
    background-image: -webkit-linear-gradient(left, blue, transparent 50%, blue);
    background-image: -moz-linear-gradient(left, blue, transparent 50%, blue);
    background-image: -o-linear-gradient(left, blue, transparent 50%, blue);
    background-image: linear-gradient(left, blue, transparent 50%, blue);
}

带有侧翼渐变的居中图像无法在所有浏览器中使用

2 个答案: