CSS:创建纹理背景

Question

我目前正在努力为我的网站设置一个足够快的加载图像背景.我已经使用了数据网址图像甚至是光学图像,但是由于背景图像仍然非常大,因此在加载页面时需要很长时间.是否可以使用CSS创建一个带纹理的背景颜色,如下图所示？这是一个例子

我尝试过但无法与之匹敌:

Answer 1

使用最新的CSS3技术,可以创建带纹理的背景.看看这个:http://lea.verou.me/css3patterns/#

但它仍然局限在很多方面.浏览器支持也没那么准备好了.

你最好的选择是使用小纹理图像并重复该背景.你可以在这里准备好使用纹理图像:

http://subtlepatterns.com

Answer 2

如果可能的话,你应该尝试将图像切成一个可以重复的小块.我已将该图像切成101x101px图像.

CSS:

body{
  background-image: url(SO_texture_bg.jpg);
  background-repeat:repeat;
}

但在某些情况下,我们无法将图像切割成较小的图像.在那种情况下,我会使用整个图像.但你也可以使用像Mustafa Kamal所提到的CSS3方法.

祝你好运.

Answer 3

也可以仅使用 CSS和Repeating-Linear-gradient()添加纹理

尝试以下示例：

div {
    margin:10px;
    width:200px;
    height:200px;
    background-color: #67686b;
}

.pattern1{
    background-image: repeating-linear-gradient(36deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);
}

.pattern2 {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 1px, transparent 6px);
    background-size: 4px 4px;
}

<section style='display:flex'>
  <div class='pattern1'></div>
  <div class='pattern2'></div>
</section>

奖励：在此链接中，您可以找到不同类型的图案，您可以自定义这些图案以满足您的需求。