Question

我是一名后端开发人员，我的设计技能无可否认。有一个CSS背景效果，我真的非常喜欢，我想知道是否有人可以给我一个关于如何实现它的一般概念？如果您查看sourcebits.com或youtube.com等网站，背景看起来有点灰色，纹理几乎就像一张高质量的静止图案。他们是如何实现这种效果的？

感谢。

Answer 1

SourceBits使用的CSS：

body {
background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0;
}

SourceBits背景链接： http://www.sourcebits.com/images/body-by-bg.jpg

YouTube使用的CSS：

body {
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0;
background-color: #EBEBEB;
background-repeat: repeat;
}

YouTube背景链接： http://s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png

Answer 2

他们可能正在使用平铺的小图形。通常这个小图形是10x10像素或更小，并包含背景颜色（灰色，在YouTube的情况下）和一些比背景颜色稍暗的点。平铺时，会产生阴影效果。

在我结束之前，@安妮得到了答案！她还包括您需要的确切代码。但是，是的，现在你知道了代码，并且你得到了答案的“为什么”：）

Answer 3

不是您的问题的答案，但是当您进行前端编码时，这可能会对您有所帮助：您是否尝试过使用Chrome的调试工具？还是Firebug？这将让您看到HTML，以及应用于它的任何CSS样式定义。它比查看源代码要快得多，特别是如果前端不是你的本地有用，因为它会显示适用于该特定元素的CSS规则 - 背景，字体，你有什么。

Answer 4

他们使用图片，每个角落和边需要一张

如何实现“纸样”背景效果？

4 个答案: