在html中混合颜色答案

【问题标题】：Mixing colours in html在html中混合颜色
【发布时间】：2020-02-25 14:30:59
【问题描述】：

我正在寻找一种方法将我的网站的背景颜色设置为这种颜色，而不必使用全尺寸图像。

<!DOCTYPE html>
<html>
<body style="background-color:#b0e0e6;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
</style>
</head>
<body>


<div class="container">
  <img src="images/youtube1.png" alt="Image of a phone with youtube on it" style="width:100%;">
  <div class="content">
    <h1>The History Of Youtube</h1>
    <p>Started by Jawed Karim, Steve Chen, and Chad Hurley, YouTube first launched in 2005 and has now become one of the most visited websites in the history of the internet. As employees of PayPal, the three soon realized, in 2004, that there wasn't one location where videos could be shared. Years later, Karim explained that it was the Janet Jackson Super Bowl incident as well as the tsunami in December that triggered the idea.</p>
  </div>
</div>

</body>
</html>

图片链接：https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.xmple.com%2Fwallpaper%2Forange-pink-gradient-linear--c2-ff69b4-d8b04d-a-30-f-14-image%2F&psig=AOvVaw0ZdrAOKDkB9tViVXEdnmhC&ust=1582726670838000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKCgjbry7OcCFQAAAAAdAAAAABAJ

【问题讨论】：

你关注background-image: linear-gradient(...)了吗？
您好，很抱歉这个问题。我想真正的问题是帮助在网站上混合颜色的东西的名称是什么。我不知道这个名字，直到我看到它说“你有没有查看背景图像：线性渐变（...）？ - chriskirknielsen 9 分钟前” 现在我知道这个名字是渐变我能够做到。对不起这个帖子。
这能回答你的问题吗？ How do you make a gradient background in css?
您是来学习的，我们是来帮助的，无需道歉。我只是想给你指出正确的方向。 ;) 抱歉我的错字（看起来 -> 看起来），似乎还在醒来。

标签： html

【解决方案1】：

您可以使用linear-gradient()

图片的标题显示

壁纸橙色粉色渐变线性#ff69b4 #d8b04d 30°

这是您需要的所有指示。你可以在 CSS 中这样写

.background {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(30deg, #d8b04d, #ff69b4);
}

&lt;div class="background"&gt;&lt;/div&gt;

【讨论】：

谢谢你，我会在你删除你的评论后立即删除这条评论，以免看起来我忽略了你 xd。非常感谢您的帮助