我想有一个背景图像与'淡出效果'。 CSS3 [英] I would like to have a background-image with a 'fade out effect'. CSS3

问题描述

是否可以从图像中心到图像左侧实现淡出的透明效果

Is it possible to achieve fade out transparent effect on an image from the center of an image to the left of the image

我试过下面的图片没有结果

I have tried the below and i get no results

#content {
display: block;
width: 960px;
margin: auto;
margin-top: 48px;
background-image: url(../images/feature-image-wild-horse.jpg),    -moz-linear-gradient(left, #444444, #999999); /* FF3.6+ */
overflow: hidden;

}

推荐答案

一种解决方案是使用模糊的插入框阴影（ https： //developer.mozilla.org/en/docs/CSS/box-shadow ）：

http://jsfiddle.net/n1ck/NkHdh/4/

#content {
    width:350px;
    height:350px;
    background-image: url(http://placekitten.com/350/350);
    -moz-box-shadow: inset 70px 0px 50px -10px white;
    -webkit-box-shadow: inset 70px 0px 50px -10px white;
     box-shadow:inset 70px 0px 50px -10px white;
}

---

如果要使用渐变，可以使用：before 之前获得渐变以覆盖背景图片，否则将看不到渐变。

---

If you want to use a gradient, you can use :before to get the gradient to overlay the background image, otherwise the gradient won't be seen.

下面是一个如何实现这一目标的示例：
http://jsfiddle.net/n1ck/brqcu/2/

Here's an example of how you can achieve this:
http://jsfiddle.net/n1ck/brqcu/2/

#content {
    width:350px;
    height:350px;
    background-image: url(http://placekitten.com/350/350);
}

#content:before {
    width:350px;
    height:350px;
    content:'';
    display:block;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
}

这篇关于我想有一个背景图像与'淡出效果'。 CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！