Question

我是html中的新手..我的背景的html和css标签是什么样的？

enter image description here

Answer 1

如果您不想引入额外的元素，可以这样做：

CSS：

body {
    background-color: grey;
}
body:before,
body:after {
    content: "";
    background-color: blue;
    height: 30%;
    position: absolute;
    left: 0;
    width: 100%;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}

证据就在小提琴中：http://jsfiddle.net/TSZTu/1/

此解决方案引入了利用body元素的before和after伪元素来生成蓝条。通常它们是不可见的，但content属性为它们提供内容并使它们显示出来。它们本身是内联的，但使用CSS可以根据需要定位它们。

<强>更新

我在上面的示例中使用了absolute，但这会导致它们与您的身体一起滚动。此外，他们将在任何身体内容之上。您可以使用position: fixed和z-index: -1来解决此问题，如下所示：

http://jsfiddle.net/TSZTu/2/

每个请求的替代解决方案（尽管我会选择上面的一个）

正如Vucko所提到的，你也可以使用渐变。现在，我不擅长构建渐变，但幸运的是，网上有很好的gradient generators。它们将为您提供大量代码以添加对多个浏览器的支持，它可能看起来像这样：

background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 0%, #2989d8 30%, #333333 30%, #333333 65%, #2989d8 65%, #2989d8 65%, #2989d8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(30%,#2989d8), color-stop(30%,#333333), color-stop(65%,#333333), color-stop(65%,#2989d8), color-stop(65%,#2989d8), color-stop(100%,#2989d8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=0 ); /* IE6-9 */

实际上这有点伪装。如您所见，这是一个从蓝色到蓝色的渐变，接着是从灰色到灰色的渐变，接着是从蓝色到蓝色的另一个渐变。

效果完全不同，因为渐变填充了身体的总面积。尽管事实上一个渐变开始于最后一个渐变的位置，但您仍然可以看到蓝色和灰色之间有点模糊的线条（至少在Chrome中）。

无论如何，这是结果：http://jsfiddle.net/TSZTu/3/

Answer 2

HTML：

<div class="blue">
</div>
<div class="grey">
</div>
<div class="blue">
</div>

CSS：

.blue{
    background-color:blue;
}
.grey{
   background-color:grey; 
}
div.blue{
    padding:40px;
}
div.grey{
    padding:80px;
}

演示：http://jsfiddle.net/8Zt7w/2/

Answer 3

这个问题是......不完整或缺少某些东西......你需要提供更多信息。

在HTML标记本身上，您可以使用类似

的内容

<body bgcolor="#ff0000">
<body bgcolor="red">

对于CSS，您可以使用类似

的内容

<body style="background-color:#ff0000;">
<body style="background-color:red;">

简单地说，我建议您使用谷歌并从一些基本教程开始.. StackOverflow不是教程源...一旦这个问题得到解答，我们不希望下一个问题是......我怎么做插入文本...当人们在这里提供帮助时，您应该学习对HTML / CSS的基本理解

Answer 4

<HTML>

<style>
Body{
 Background-color:blue;

}

#grey
 Margin: auto;
 Background-color:grey;
 Height:300px;

}
<body>
<div Id='grey'>

</div>
</body>
</HTML>

这样的东西......？

Answer 5

使用单个div尝试此css如上图所示：

div {
    height: 400px;

    background: -moz-linear-gradient(top, #2853c5 0%, #2853c5 20%, #7e7e7e 20%, #7e7e7e 80%,#2853c5 80%,#2853c5 100%); /* FF3.6+ */


}

Answer 6

<html>
<head>
    <title>Test</title>
    <style>
            .blueclass
            {
                background-color:Blue;
                }
            .grayclass
            {
                background-color:Gray;
                }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr class="blueclass">
            <td width="200px" height="200px">
            </td>
        </tr>
        <tr class="grayclass">
            <td height="200px">
            </td>
        </tr>
        <tr class="blueclass">
            <td height="100px">
            </td>
        </tr>
    </table>
</body>
</html>

2种不同的颜色为背景html

6 个答案: