Question

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

我无法找到背景的CSS来看看它们有什么，它出现了所有混乱的大量额外的谷歌地图css就可以了。

任何人都可以看到他们正在做什么来做顶部和灰色的条带？

谢谢！

Answer 1

从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中，您需要右键点击页面的任何元素，然后选择检查元素。

Answer 2

您可以使用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);
}

Answer 3

它不是图像而是背景颜色css属性。你可以这样做：


<header>My header</header>

使用CSS：


header { background-color: #D7E6B8 }

您网页的正文可以包含灰色背景的CSS：


body { background-color: #EBEDE7 }

Answer 4

没有背景图片，所有都是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;
}

Answer 5

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

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

此内容位于<header>，其中还有一个稳定的绿色background-color（实际为#D7E6B8）。

Answer 6

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

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;
}

试图用css创建一个没有运气的背景

6 个答案:

如何找到这个？