css - 如何为页眉和底部使用多种背景颜色?

标签 css

如何为我的网站使用多种颜色?

我正在为页眉使用 gradient 颜色,看起来像 ![this][1] 我还想在网站中间显示卡片栏,背景应该是白色,我怎样才能做到这一点? 我试着做一个 div 样式

.testdiv {
  background: #ffffff;
}

但这只会改变 div background,看起来像 ![this][2]

编辑:我的问题的完整代码。

<section class="bottom-articles">


        <article class="bottom-article">
          <img class="article-image" src="/images/layer-2.jpg">
          <div class="article-text-wrapper">
            <h3 class="article-title">Issue 1</h3>
            <div class="article-description">

            </div>

          </div>
        </article>

对于样式,我想出了类似的东西

 .bottom-article {
  padding-top: 40px;
  float:right;
  margin-right: 300px;
  padding-right: 80%;

}

最佳答案

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:orange;}
#p1 {background-color:transparent;}
#p2 {background-color:#ffffff;}
</style>
</head>

<body>
<p>HEX colors:</p>
<p id="p1">transparent</p>
<p id="p2">white</p>
</body>
</html>

尝试做

.testdiv {
  background-color: transparent;
}

关于css - 如何为页眉和底部使用多种背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50817245/

相关文章:

html - 垂直文本不居中

html - CSS3 选择框单独正确对齐 Google Chrome

html - 如何调试@font-face 问题?

html - 如何将 vh 和 vw CSS 用于一页无滚动响应网页?

css - Laravel Mix - 当本地主机上的网站不在根文件夹中时,URL 处理工作出错

css - 具有 'white-space: nowrap' 的元素的宽度不适应子内容

css - 如何设置CSS表格的最大高度?

html - Bootstrap 表单检查内联不起作用

javascript - 切换位置固定和静态

javascript - 第一个 li 的 JQuery 选择器