首页如何在body中设置图片不平铺

如何在body中设置图片不平铺

时间: 2024-04-17 12:26:28 浏览: 122

body中插入图片要注意的坑

今天做系统界面，一屏展示，“body”中插入背景图片遇到一个从来没遇到过的问题，背景图片设置不重复平铺的时候，图片设置相对于屏幕下定位（background-position:bottom）后，背景图不显示。原来body默认高度是0；设置：html{height:100%}；body{height:100%}即可解决不过，看着这样真的不爽，没有特殊需求的很不喜欢设置html和body标签的高度，突然想起来有一个css属性应该有用： background-attachment 果然，加上“background-attachment:fixed;”问题搞定~~~ 作者：白眉鹰王707

要在HTML文档的`<body>`元素中设置背景图片不平铺，可以使用CSS的`background-repeat`属性和`background-size`属性。以下是一个示例的HTML和CSS代码，演示如何设置图片在`<body>`中不平铺： ```html <!DOCTYPE html> <html> <head> <style> body { background-image: url('path/to/image.jpg'); background-repeat: no-repeat; background-size: cover; } </style> </head> <body>  </body> </html> ``` 在上述代码中，将`'path/to/image.jpg'`替换为你实际的图片路径。通过将`background-repeat`设置为`no-repeat`，背景图片将只显示一次，不会进行平铺。通过将`background-size`设置为`cover`，背景图片将被缩放以填充整个`<body>`元素，保持其宽高比。这样设置后，背景图片将在`<body>`中不进行平铺，并且会根据页面大小自动缩放以适应屏幕。

阅读全文