jQuery 实现 div 背景图片与 div 等大：代码示例及注意事项

下面是使用 jQuery 设置 `div` 图片，并且让图片大小和 `div` 的大小一样的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <title>设置 div 图片</title> </head> <body>  <div id="myDiv" style="width: 300px; height: 200px;"></div> <script> $(document).ready(function () { // 获取 div 元素 var divElement = $('#myDiv'); // 设置图片的 URL var backgroundImageUrl = 'https://example.com/your-image.jpg'; // 设置图片 divElement.css({ 'background-image': 'url(' + backgroundImageUrl + ')', 'background-size': 'cover', // 让图片覆盖整个 div 'background-position': 'center', // 让图片居中显示 'background-repeat': 'no-repeat' // 禁止图片重复 }); }); </script> </body> </html> ``` 代码注释解释： 1. 引入 jQuery 库：通过 `<script>` 标签引入 jQuery 库，这样才能使用 jQuery 的功能。 2. 定义 `div`：在 HTML 中定义一个 `div`，可以设置其宽度和高度。 3. 使用 `$(document).ready()`：确保文档加载完成后再执行代码。 4. 获取 `div` 元素：使用 `$('#myDiv')` 获取指定 `id` 的 `div` 元素。 5. 设置图片：使用 `css()` 方法设置 `div` 的图片、大小、位置和重复属性。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 图片的 URL 必须正确，否则图片无法显示。 2. `background-size` 属性除了 `cover` 之外，还有其他取值，如 `contain`，根据实际需求选择合适的值。 3. 不同浏览器对 `background-size` 和 `background-position` 的支持可能存在差异，需要进行兼容性测试。 ######[AI写代码神器 | 555点数解答 | 2025-09-02 09:42:26]

服务商

更多选项

快捷项

自定义