两个不同colors的网站背景怎么上色？
[英]How color the background of website two different colors?
问题描述
This is a really hard question to formulate , so I've included a screenshot of a website design that I made in Pages (Mac) - I did so by using different colored blocks and stacking them on top of one another to create the desired effect that can be seen in the first screenshot.
这是一个很难表述的问题，所以我附上了我在 Pages (Mac) 中制作的网站设计的屏幕截图 - 我这样做是通过使用不同颜色的块并将它们堆叠在一起以创建所需的效果这可以在第一个屏幕截图中看到。
My question is: How do I emulate this, different colored backgrounds in HTML?我的问题是：如何在 HTML 中模拟这个不同颜色的背景？
I've tried coloring my padding differently with an HTML tag in CSS ( HTML我尝试使用 CSS 中的 HTML 标记（ HTML
{ padding: 10%; background-color: #ebecef; }
) but I failed to fully encapsulate my dream. ) 但我未能完全封装我的梦想。 I've attempted to make divs (since they're 'block tags') and color them differently, but it didn't work.我试图制作 div（因为它们是“块标签”）并为它们着色，但它没有用。
Pages Screenshot example页面截图示例
High Contrast Screenshot example高对比度屏幕截图示例
High Contrast Page Description: Blue would be the base background color, Orange would be the inset/overlay, and pink would be the div navbar but its painted the same color as the inset/overlay as seen in the first picture.高对比度页面描述：蓝色将是基本背景颜色，橙色将是插入/覆盖，粉红色将是 div 导航栏，但它的颜色与第一张图片中看到的插入/覆盖相同。
To try and clarify: How would one either, go about creating blocks of a different color and transforming them into a certain position, or, creating a sort of two-tone effect for the background color that's 'inseted' into itself or overlayed (whichever's easiest or works) like seen in the picture (The grey being the base color and the white-ish color being the additional color that's been inseted/overlayed.) ?尝试澄清： go 如何创建不同颜色的块并将它们转换为特定的 position，或者，为“嵌入”自身或叠加的背景颜色创建一种双色调效果最简单或有效）就像在图片中看到的那样（灰色是基色，白色是插入/覆盖的附加颜色。） ？
I really hope I explained that well enough, if you could help it would be greatly appreciated,我真的希望我解释得足够好，如果你能帮助它，将不胜感激，
DeSept九月
4 个解决方案
解决方案1
2 2020-08-16 06:23:27
You could also use the linear-gradient syntax if you want the two colors to blend mor depending on if you want a hard or soft line between colors.如果您希望两个 colors 混合 mor，您也可以使用线性渐变语法，具体取决于您想要 colors 之间的硬线还是软线。 Find out more about it here: https://www.w3schools.com/css/css3_gradients.asp在此处了解更多信息： https://www.w3schools.com/css/css3_gradients.asp
example syntax below:下面的示例语法：
#grad { background-color: linear-gradient(-90deg, red, yellow); }
解决方案2
1 已采纳 2020-08-16 02:30:18
Especially with a responive design in mind, I would do it with a grid.特别是考虑到响应式设计，我会用网格来做。 You just need 3 boxes and can get the title to collide with an offset or correct the padding.您只需要 3 个框，就可以让标题与偏移量发生冲突或更正填充。 Just make sure to set the z-index to push it on front.只需确保将 z-index 设置为将其推到前面即可。
body { background-color: lightgrey; display: grid; grid-template-columns: 30px 40% auto 30px; grid-template-rows: 48px auto; margin: 0 0 0 0; padding: 0 0 0 0; font-size: 16px; } #title { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background-color: transparent; text-align: center; padding-top: 38px; z-index: 1; font-size: 20px; } #menu { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; background-color: orange; text-align: center; padding-top: 16px; } #content { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: -1; background-color: yellow; min-height: 100vh; padding: 10px 10px 10px 10px; }
<body> <div id="title">Title</div> <div id="menu">Menu Link</div> <div id="content"> <p>Random text content...</p> </div> </body>
解决方案3
0 2020-08-16 02:11:27
At a very basic level you can achieve this using nested divs, setting the width and height in combination with the css position property and top , left css properties.在一个非常基本的级别上，您可以使用嵌套 div 来实现此目的，结合 css position属性和top , left css 属性设置宽度和高度。 Like below:如下所示：
<div style="width: 100vw;height: 100vh;background-color: blue;position: relative;">
<div style="height: inherit; width: inherit;">
<div style="width: 100%; height: 80px;margin-right: 20%">
<div style="width: 340px; height: 80px; background-color: green; float: right;margin-right: 10%">
</div>
</div>
<div style="width: 80%;height: 80%;background-color: yellow;margin: auto auto;">
<h1 style="position: absolute; top: 40px;left:120px">Lorem Ipsum</h1>
</div>
</div>
Sandbox: https://codesandbox.io/s/optimistic-voice-zgt9k?file=/index.html:0-830沙箱： https://codesandbox.io/s/optimistic-voice-zgt9k?file=/index.html:0-830
However, this solution is not responsive and is very basic;但是，此解决方案没有响应性并且非常基本； as an alternative you could look at either CSS Grid or Flexbox to achieve the layout you are looking for in the attached images.作为替代方案，您可以查看 CSS Grid 或 Flexbox 以实现您在附加图像中寻找的布局。
CSS Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox CSS Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout CSS 网格： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
解决方案4
0 2020-08-16 02:16:15
I tried to redraw your picture.我试图重绘你的照片。 That's not the same but you can use my styles for your goal.这不一样，但您可以使用我的 styles 来实现您的目标。 I used Nav as a div , but there are a lot of better Nav examples on internet like Bootstrap NAV .我使用 Nav 作为div ，但互联网上有很多更好的 Nav 示例，例如Bootstrap NAV 。 This is not responsive, then you have to add @media css there, and maybe use collapse navbar.这不是响应式的，那么您必须在此处添加@media css，并且可能使用折叠导航栏。
body{ background-color: blue; }.Center80{ margin: 0 auto; width: 80vw; }.Menu{ height: 20px; width: 30vw; margin-right: 0; background-color: #a119aa; }.SecondColor{ background-color: orange; min-height: 100vh; }.SecondColor h1 { transform: translate(0px,-13px); color: white; font-size: 25px; }
<html> <body> <div class="Center80 Nav" align="right"> <div class="Menu"> Menu </div> </div> <div class="SecondColor Center80"> <h1>LOREM IPSUM</h1> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.