1

我正在尝试创建一个类似于http://www.latlong.net/的网站背景，但我没有任何运气。这个绿色和灰色背景是一个图像还是顶部的绿色图像和灰色背景？

我找不到背景的 css 来看看他们有什么，它上面有很多额外的谷歌地图 css。

谁能看到他们在做什么来做顶部和下面灰色的条带？

谢谢！

4

6 回答 6

6

从用 Chrome 检查元素中提取；你需要：

body{
     background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}

header{
    background-color: rgb(215, 230, 184);    /* this is #D7E6B8*/
}

工作小提琴：http: //jsfiddle.net/shahverdy/NByX9/

如何找到这个？

通常，如果您想了解网页的 Html/Css 是如何工作的，最好的方法是使用Chrome Developer Tools等工具，而不是从源代码中读取 Html/Css 文件。其他浏览器中也有一些其他工具。

在 Chrome 中，您需要右键单击页面的任何元素并选择检查元素。

于 2013-04-02T04:41:39.260 回答
3

您可以通过使用 Chrome 开发人员工具并检查元素来找到这一点： https ://developers.google.com/chrome-developer-tools/

看起来他们正在使用背景颜色和底部边框和阴影来设置标题元素的样式。

header {
    margin-bottom:10px;
    background-color: #D7E6B8;
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
于 2013-04-02T04:42:09.947 回答
1

它不是图像，而是背景颜色 css 属性。您可以执行以下操作：

<header>我的标题</header>

使用 CSS：

标题{背景颜色：#D7E6B8}

您的页面正文可以具有灰色背景的 css：

身体{背景颜色：#EBEDE7}
于 2013-04-02T04:42:06.777 回答
1

里面没有背景图片，都是css背景颜色和阴影。试试下面的，

header {
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

body {
    background-color: #EBEDE7;
}
于 2013-04-02T04:49:30.753 回答
0

我想你指的是影子。它不是灰色，而是具有高透明度的黑色。

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)

这是打开的<header>，它也有一个纯绿色background-color（实际上#D7E6B8）。

于 2013-04-02T04:41:55.040 回答
0

给定页面中使用了以下类：

header {
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}


body {
    background-color: #EBEDE7;
}
于 2013-04-02T04:45:12.753 回答