首页编写一个js程序，用table定位图片，将一张图片以3×3 平铺在网页上

编写一个js程序，用table定位图片，将一张图片以3×3 平铺在网页上

时间: 2024-09-18 07:01:48 浏览: 32

在JavaScript中，我们可以利用HTML的`<table>`元素和CSS的`background-image`属性结合，来实现一张图片的3x3平铺。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; /* 间隔样式 */ height: 100%; /* 确保表格占据整个屏幕高度 */ } .grid-item { background-image: url('your-image-url.jpg'); /* 替换为你的图片URL */ background-size: cover; /* 图片缩放填充满每个单元格 */ width: 100%; height: 100%; border: 1px solid #ccc; /* 边框样式，仅做展示 */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item"></div>   </div> </body> </html> ``` 在这个例子中，你需要替换`'your-image-url.jpg'`为你的实际图片链接。这个HTML文件会创建一个3x3的网格布局，并且每个单元格都有相同的背景图片。如果你想通过JavaScript动态生成这些单元格，你可以使用以下代码： ```javascript const container = document.querySelector('.grid-container'); for (let i = 0; i < 9; i++) { const item = document.createElement('div'); item.className = 'grid-item'; container.appendChild(item); } ``` 这将会自动为你添加剩余的8个单元格。

阅读全文