css - 是否可以将水平渐变淡入垂直渐变以掩盖某些东西

Question

我有三个背景渐变，水平蒙版，上边框和下边框实现了这种效果，将边框淡入背景：

使用此代码（使用浏览器前缀重复大约一百万次.. ugh）：

background: 
    linear-gradient(to right,  rgba(200,100,40,1) 0%,rgba(250,235,115,0.5) 50%,rgba(200,100,40,1) 100%), 
    linear-gradient(to top,  rgba(240,175,30,1) 0%,rgba(240,175,30,0) 2px),
    linear-gradient(to bottom,  rgba(250,235,115,1) 0%,rgba(250,235,115,0) 2px) ; /* W3C */

它几乎就在那里，但我的问题是蒙版的边缘完全不透明（1）但背景并不总是纯色（一些水平网格和内部阴影），导致这些问题。

我目前的解决方案是修改我的所有背景代码，以确保背景在超过顶部遮罩之前不会开始褪色，并且底部背景颜色在底部遮罩之前是完整的。这既麻烦又不灵活，而不是 css3 的意义所在。

我已经看到了一些淡出边框的解决方案（CSS 中的“淡出”边框），但他们基本上说它应该可以将边框颜色设置为渐变，但我还没有看到它真正起作用，而且线程已经过时了。

这里没有“面具”：

编辑：解决方案：http: //jsfiddle.net/turnosaurus/SWVJJ/

Answer 1

发现了一些东西，得到了这个解决方案：

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);

但是，这消除了我也使用伪 :after 应用于此元素的阴影效果，并且几乎肯定不会在浏览器中表现良好。虽然没时间摆弄这个..

http://www.html5rocks.com/en/tutorials/masking/adobe/

http://thenittygritty.co/css-masking

https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

http://mir.aculo.us/2012/09/16/masking-html-elements-with-gradient-based-fadeouts/

Answer 2

使用 Alpha 通道。

因此，父元素必须是实心的（无 ALPHA）子元素必须具有 alpha 作为淡入淡出和实心作为淡入淡出。

因此，例如，一个具有 10% 蓝色、80% 红色和 10% 蓝色的页脚，并且由于具有单独的页脚背景，您希望在底部淡入白色。

然后你想要（注意这是从我自己的代码中复制的），

#content {background:#CCCCFF;
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */
color:#000000;margin:0px}
#leftcol {}
#rightcol {}
#centrecol {background-color:#FF8080;padding-top:150px;width:80%;margin-left:10%;margin-right:10%;height:100%;}
#content2footer {background:#CCCCFF;
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */
color:#000000;margin:0px}
#content2footerleft {height:50px;width:10%;margin-top:0px;margin-left:0%;margin-right:90%;
background:#CCCCFF; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */}
#content2footercentre {height:50px;width:80%;margin-top:-50px;margin-left:10%;margin-right:10%;
background:#FF8080; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* Standard syntax */}
#content2footerright {height:50px;width:10%;margin-top:-50px;margin-left:90%;margin-right:0%;
background:#CCCCFF; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */}
#footer {margin:5px;color:#808080;font-size:10px}

		<div id="content">
			<div id="leftcol">
			</div>
			<div id="rightcol">
			</div>
			<div id="centrecol">
			</div>
		</div>
		<div id="content2footer">
			<div id="content2footerleft">
			</div>
			<div id="content2footercentre">
			</div>
			<div id="content2footerright">
			</div>
		</div>
		<div id="footer">
    <p>this is the white footer</p>
    </div>

我希望这有助于回答这个问题。我从这个确切的页面进行研究并重新解释它，最初犯了一个错误。意识到后，我知道如何解决它并且这样做了，我想我会完整地回答这个问题。