当前位置: 首页 > 知识库问答 >
问题:

在web上使用CSS创建无缝模式[关闭]

齐晟
2023-03-14

我正在网络上制作一个无缝的CSS模式。我知道这完全是无稽之谈,一点也不实际。但这只是为了好玩。

我已经创建了我的第一个瓷砖。现在我在想一个方法重复它来填充整个背景。

我能仅仅使用HTML和CSS就完成这个壮举吗?或者我必须使用javascript来完成此操作?

-

下面是我使用javascript的步骤,纠正我或建议更好的方法:

  1. 计算当前浏览器的宽度和高度。
  2. 单个平铺是(150x150),我只需要创建尽可能多的div来覆盖整个屏幕。

共有1个答案

白淇
2023-03-14

实际上,只有html和CSS才有可能做到这一点。示例中的问题是,当设置background-repeat属性时,背景的每个部分都将重叠,因为它们的大小不同,因此只需调整形状的大小和位置不同。在您的情况下,简单的方法是为每个形状(所需完整图案的大小)设置一个background-size并相应地更改它们的位置。

我修改了您的示例的一部分,使您了解它应该是什么样子的:http://codepen.io/anon/pen/pnxyd

 类似资料:
  • 问题内容: 我尝试用每行前面的行号来设置代码前置框的样式。我更喜欢只使用CSS。这就是我所做的 但是,所有行都有数字1。增量无效。这是一个jsfiddle 我做错了什么? 浏览器与此仅CSS解决方案的兼容性如何? 问题答案: 为什么计数器不增加? 您不是在父标记级别重置或创建计数器。如果将以下行添加到选择器,代码将正常工作。如果您没有在父级创建计数器(使用),则每个元素都会创建自己的计数器,然后对

  • 问题内容: 我正在使用html,css,flask和jinja2创建网站。 我有一个在Flask服务器上工作的页面,显示了按钮和标签等,但是我没有加载CSS样式表。 我如何将样式表链接到jinja2模板。我在互联网上四处张望,但找不到答案。 这是css样式表链接;我应该更改此代码还是python代码? 这是我的烧瓶代码: 这是文件的位置: 问题答案: 所有公共文件(未处理的文件,例如模板或py​​

  • 介绍 本篇主要是介绍创建对象方面的模式,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。 模式1:命名空间(namespace) 命名空间可以减少全局命名所需的数量,避免命名冲突或过度。一般我们在进行对象层级定义的时候,经常是这样的: var app = app || {}; app.moduleA = app.moduleA || {}; app.moduleA.subModule

  • 问题内容: 如何使用CSS创建圆角? 问题答案: 自从引入CSS3以来,使用CSS添加圆角的最佳方法是使用border-radius属性。您可以阅读有关该属性的规范,或获取有关MDN的一些有用的实现信息: 如果您使用的浏览器未 实现 border-radius(Chrome v4之前的版本,Firefox v4之前的版本,IE8,Opera v10.5之前的版本,Safari v5之前的版本),则

  • 我正在使用一个名为的基于ffmpeg的模块来编辑音频文件。我正在尝试使用模块,但由于某种原因,我无法关闭文件(它们没有被删除)。使用上下文管理器时,它抛出。 我所尝试的: 这段代码按照预期的方式工作,但是它没有删除tempfile,不会抛出任何错误。 这将创建第一个临时文件,然后抛出一个错误: 我不确定我在这里错过了什么

  • 问题内容: 我使用ektorp连接到CouchDB。 构建ektorp 实例的方法是使用构建器模式: 我对Spring比较陌生。请为我提供有关如何在上下文中配置以便通过进行创建的建议。 一种方法是使用。还有其他选择吗? 问题答案: 您可以尝试实现接口: 并添加到配置以下bean定义: 然后,您可以将此bean注入另一个bean,它将作为实例进行解析。