Javascript div的多重背景色
我有一个Javascript div的多重背景色,javascript,html,css,Javascript,Html,Css,我有一个div <div class="test"> Some text </div> CSS是否可以实现这一点?您可以在父级中创建三个子div。绝对定位它们,使父级透明,然后给三个div一个z索引0,使它们位于文本下方,而不是顶部。您可以使用CSS3渐变[1]来实现这种效果 div { background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%
div
<div class="test">
Some text
</div>
CSS是否可以实现这一点?您可以在父级中创建三个子div。绝对定位它们,使父级透明,然后给三个div一个z索引0,使它们位于文本下方,而不是顶部。您可以使用CSS3渐变[1]来实现这种效果
div {
background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
height: 400px;
}
您可以在上面创建这样的渐变
如果要查找静态渐变宽度,还可以使用
px
作为一个单位,以及%
(请添加浏览器前缀
如果您正在寻找跨浏览器解决方案,我还没有在此演示中添加所有规则)
(垂直拆分,只需将更改为右侧
更改为底部
)
一,。
2. 这种渐进增强方法适用于所有支持CSS 2.1伪元素及其定位的浏览器。不需要CSS3支持
#div{
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#div:before,
#div:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
您可以通过使用渐变来实现这一点: 要么用谷歌搜索它,然后创建一个自己的。 或者使用如下发电机: 这将为您提供以下css代码:
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */
你想要渐变还是严格限制颜色区域?你用的是什么CSS3生成器?@Mohsen刚刚分享:)谢谢:),我以前用过,但不喜欢this@Mohsen你看到的疯狂技术;)谢谢,我不知道线性梯度可以用这种方式。
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */