用javascript编写一个程序将一张图片以3*3平铺在网页上

在JavaScript中，我们可以利用HTML、CSS以及一些基本的DOM操作来创建一个3x3的图片平铺效果。以下是一个简单的示例，假设我们有一个名为`image.jpg`的图片文件： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .tile { width: 30px; height: 30px; display: inline-block; margin: 5px; background-image: url('image.jpg'); background-size: cover; } </style> </head> <body> <div id="grid"></div> <script> // 获取图片路径 const imgPath = 'image.jpg'; // 创建一个3x3的格子 for (let i = 0; i <= 8; i++) { // 9个位置，因为每行3个，共三行 for (let j = 0; j <= 8; j++) { let tile = document.createElement('div'); // 创建一个新的div元素 tile.className = 'tile'; tile.style.backgroundImage = `url(${imgPath})`; // 设置背景图 // 计算并设置格子的位置 tile.style.backgroundPosition = `${(i * 40) + 'px'} ${(j * 40) + 'px'}`; // 将格子添加到页面上 document.getElementById('grid').appendChild(tile); } } </script> </body> </html> ``` 这个例子中，我们首先创建了一个包含9个`div`元素的网格容器，并设置了每个小方块的样式（宽度、高度和背景）。然后通过双重循环生成了3x3的布局，并为每个格子计算了正确的背景位置，实现了图片的平铺。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通