如何利用CSS实现一款漂亮的无缝背景图

当我们用多个对象制作无缝图案时，我们需要处理对象在边界上的情况。通常我们创建对象的副本并将它们放置在适当的位置以使拼贴工作无缝衔接。

当我们用多个对象制作无缝图案时，我们需要处理对象在边界上的情况。通常我们创建对象的副本并将它们放置在适当的位置以使拼贴工作无缝衔接。

在 CSS 中，有一种方法可以做到这一点，而无需手动创建副本或对位置进行任何计算，方法是利用 CSS background 属性。

CSS 中的背景默认是可重复的，如果我们使用 background 或 background-image 创建对象，无论它们的位置如何，它们都可以自动平铺。

element {background-image:radial-gradient(#6155a6 30%, transparent 0);/* default */background-size: 100% 100%;background-repeat: repeat;
}

创建图案背景

我们从指定用于平铺的片段的大小开始。这是必不可少的一步，因为它决定了图案的可重复空间。

element {width: 180px;height: 180px;
}

在背景中使用radial-gradient径向渐变创建一个圆形对象。

element {width: 180px;height: 180px;background-image:radial-gradient(#6155a6 30%, transparent 0);
}

即使你看不到边缘，圆圈也会正确平铺。使用 background-position 将它移动到其他地方。不用担心越界，浏览器已经帮我们搞定了。

element {width: 180px;height: 180px;background-image:radial-gradient(#6155a6 30%, transparent 0);background-position: -110px -20px;
}

我们可以通过添加更多背景图像来添加更多对象。

element {width: 180px;height: 180px;background-image:radial-gradient(#6155a6 30%, transparent 0),radial-gradient(#6155a6 20%, transparent 0),radial-gradient(#6155a6 10%, transparent 0);background-position:-110px -20px,-20px -75px,20px 40px;
}

此元素可用于通过平铺制作无缝图案。唯一的问题是元素本身不能像背景图像那样容易地平铺。我们需要创建许多相同的元素并将它们放置在网格中。虽然截取元素的屏幕截图并将其保存为 PNG 格式是一个快速的解决方案。

使用 CSS 涂鸦

css-doodle 提供令人兴奋的功能之一是能够使用 @doodle 函数从另一个 css-doodle 元素生成背景图像。如果我们在 css-doodle 中创建图案片段，它可以用于背景图像。这意味着图案片段可以平铺。

/* container size */
@grid: 1 / 100% 180px;/* pattern dimension */
background-size: 180px 180px;/* pattern fragment */
background-image: @doodle(@grid: 1 / 100%;background-image:radial-gradient(#6155a6 30%, transparent 0),radial-gradient(#6155a6 20%, transparent 0),radial-gradient(#6155a6 5%, transparent 0);background-position:-110px -20px,-20px -75px,20px 40px;
);

使用渐变来创建形状是相当有限的。幸运的是，@doodle 函数可以嵌套。例如，我们可以将其中一个由 radial-gradient 创建的圆形对象替换为另一个 css-doodle 元素，里面是一个旋转 30 度的心形。

/* pattern fragment */
background-image: @doodle(background-image:@doodle(@grid: 1 / 100%;@size: 80px;margin: auto;background: pink;@shape: heart;transform: rotate(30deg);),radial-gradient(#6155a6 20%, transparent 0),radial-gradient(#6155a6 5%, transparent 0);background-position:-110px -20px,-20px -75px,20px 40px;
);

如何在实际开发中使用它

我建议使用 PS 和 AI 等设计工具创建图案背景，但直接从代码创建一些东西仍然很有趣。所以这里有两种方法可以将它应用到您的网站：

1)、在 CSS 或 css-doodle 中创建图案背景片段并截取 DOM 元素，或使用 css-doodle 的 export() API 将图案片段保存为图像。

.container {background-image: url(pattern.png);background-size: /* fragment size */;
}

2)、直接导入并使用 css-doodle。

<style>css-doodle {--pattern: (/* your code */);}
</style>
<css-doodle use="var(--pattern)"></css-doodle>

我希望这篇文章很好地解释了我们如何利用 CSS 背景重复和 css-doodle 来创建无缝背景图案。有无数种方法可以形成对象，所以我可以想象这是一种非常有用的技术。

当然，最终我们选择那种方式来实现，都是根据我们具体的开发项目与自己本身所掌握的技术。

如何利用CSS实现一款漂亮的无缝背景图相关推荐

JS+CSS打造一款漂亮绿色相册代码
代码简介: JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似 ...
时间轴照片html触摸,利用Jquery实现几款漂亮实用的时间轴(附示例代码)
前言最近在项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都 ...
给div添加漂亮的边框背景图
在项目中,给页面,尤其是监控页面这种需要美观的页面,添加一个漂亮的边框是非常高端大气上档次的,但是往往利用css样式去画这样的边框又很麻烦,最近突然发现,原来可以给div弄个漂亮的边框背景图片很容易就 ...
css背景图替代文字 - 如何让css无法加载时页面功能依然不受影响
方法一:利用text-indent将文字移出盒子,然后让换行文字不换行,这样,当css无法加载时,虽然背景图无法显示,但是文字也不会被移出盒子,这样文字显示在用户的视野里了代码: <!DOCT ...
css设置背景图片随滚动缓慢滚动_h5页面背景图很长要有滚动条滑动效果的实现...
最近做项目过程中,老大提了个很奇葩的要求背景图铺满页面,他要求有滚动条可以滑动,他给我讲的思路是用js 获取背景图片的高,在获取当前窗口的高,两者比较,当窗口的高小于背景图片的高,把窗口的高设置成背 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
css同时显示背景图和背景色，且背景色是渐变色
今天在写css样式的时候,竟然被背景图给难倒了.我写的要么是不显示背景色,要么是不显示背景图,因为背景色是渐变色,当我把渐变色改成纯色的时候就显示了现在怎样显示渐变背景色且正常的显示背景图,其实很简 ...
纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
二十款漂亮的CSS字体样式，让你受用非浅
二十款漂亮的CSS字体样式,让你受用非浅平时对于网站整站的字体风格常常很纠结,纠结到底用什么样式才行,才好看,后来在网上搜集收到二十种我认为很漂亮的字体样式并使用,感觉很美观,解决了我以前的纠结.具 ...

如何利用CSS实现一款漂亮的无缝背景图

如何利用CSS实现一款漂亮的无缝背景图相关推荐

最新文章

热门文章