gpt4 book ai didi

html - 两种背景颜色(水平)

转载 作者:行者123 更新时间:2023-11-28 04:20:39 26 4
gpt4 key购买 nike

我想知道是否可以在背景中使用两种不同的颜色,并通过 Bootstrap 在每一侧扩展 100%。

这是我的意思的截图,

enter image description here

左侧为红色,右侧为深色,为更大的屏幕放大 100%。有什么简单的解决方案吗?

最佳答案

有几种方法可以做到这一点。最好的方法是使用伪元素。您将对 <body> 应用一种颜色, 和创建的第二种颜色 :after元素。

HTML:

<body>

<main>

<p>This is my first paragraph.</p>

<p>This is my second paragraph.</p>

Page continues...

CSS:

body {
background-color:rgb(155,155,155);
}

body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}

main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}

http://jsfiddle.net/Q66Xn/3/

这个答案产生了最干净的代码。缺点:IE8支持有限,IE7不支持。如果您需要使用这两种浏览器,请参阅下一个选项:


给出 <body>一侧的背景颜色相同,那么我们不使用 :after 创建一个伪元素,而是创建一个真实的元素。

HTML:

<body>

<div id="bgleft"></div>

<main>

<p>This is my first paragraph.</p>

<p>This is my second paragraph.</p>

Page continues...

CSS:

body {
background-color:rgb(155,155,155);
}

#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}

main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}

http://jsfiddle.net/Q66Xn/4/

产生的结果与第一种方法完全相同。优点是浏览器兼容性更高,缺点是代码多一点。


最后,您可以使用附加到主体的渐变。这将在单个 body 元素上提供两种颜色,节省额外的 HTML,但它将通过一组讨厌的 CSS 来支持所有浏览器:

body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}

http://jsfiddle.net/Q66Xn/

缺点:复杂的 CSS,以后很难轻松编辑。

关于html - 两种背景颜色(水平),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22152109/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com