[英]CSS gradient over another element. Is that possible?
我对技术感兴趣,该技术可以在另一个div(白色渐变水平线)上进行渐变。 这是我想要的样子:
这就是我目前所拥有的(是的,我知道):
水平线很简单
pointer-events: none; height: 457px; position: absolute; right: 0; top: -80px; width: 100%; background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 20%);
图像是具有绝对定位的简单(rails image_tag)。
这是一个提示。 您可以使用CSS创建多个三角形的形状,而只需定位和旋转这些形状即可匹配您的徽标。
例如,以下是一种形状的示例。 您可以引用它,然后将其复制并按照自己的方式进行。 干得好。
HTML:
<div class="shape"></div>
CSS:
.shape{
height: 100px;
width: 100px;
position:relative;
background: rgb(xxx,xxx,xxx);
background: -moz-linear-gradient(top, rgba(xxx,xxx,xxx,xxx) xxx%, rgba(xxx,xxx,xxx,xxx) xxx%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(xxx%,rgba(xxx,xxx,xxx,x)), color-stop(xxx%,rgba(xxx,xxx,xxx,x)));
-webkit-linear-gradient(top, rgba(xxx,xxx,xxx,x) xxx%,rgba(xxx,xxx,xxx,x) xxx%);
-o-linear-gradient(top, rgba(xxx,xxx,xxx,x) xx%,rgba(xxx,xxx,xxx,x) xxx%);
-ms-linear-gradient(top, rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%);
linear-gradient(top, rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#xxx', endColorstr='#xxx',GradientType=0 );
}
.shape:after {
-moz-transform: rotate(xxdeg);
-ms-transform:rotate(xxdeg);
-webkit-transform:rotate(xxdeg);
-o-transform:rotate(xxdeg);
background: none repeat 0 0 xxx;
content: "";
height: xxx;
left: xxx;
position: absolute;
top: xxx;
width: xxx;
}
“ xx”或“ x”或“ xxx”是虚拟值,您可以将其替换为自己的值。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.