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

Question

我有三个背景渐变，水平遮罩，顶部边框和底部边框可以实现此效果，将边框淡入背景：

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

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）但是背景并不总是纯色（一些水平的grds和内部阴影），导致这些问题。

我现在的解决方案是修改我的所有背景代码，以确保背景不会开始淡化，直到它超过顶部蒙版并且底部背景颜色在底部蒙版之前已满。这很麻烦且不灵活，不是css3的内容。

我已经看到一些淡出边框的解决方案（"Fade" borders in 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％蓝色的页脚，由于具有单独的页脚背景，您希望在底部淡入白色。

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

＆＃13;

＆＃13;

#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}

＆＃13;

		<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>

＆＃13;

＆＃13;

＆＃13;

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