html5实现长方形里面黑白纹理
时间: 2024-11-25 10:15:30 浏览: 18
HTML5本身是一种标记语言,用于描述网页结构,而CSS(层叠样式表)则是用来控制网页样式的。如果你想在HTML5页面上创建一个带黑白纹理的长方形,你可以结合两者来实现。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.rectangle {
width: 200px;
height: 100px; /* 长方形尺寸 */
background-image: linear-gradient(to right, black 25%, white 25%, black 75%, white 75%);
background-size: 10px 10px; /* 纹理大小 */
background-repeat: repeat; /* 黑白棋盘效果 */
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
```
在这个示例中,`.rectangle` 类设置了长方形的宽度、高度以及背景。背景由两个颜色(黑和白)交替渐变,通过设置 `background-size` 来控制纹理的大小,`background-repeat` 设置为 `repeat` 则实现了黑白棋盘效果。
阅读全文