首页background-image案例

background-image案例

时间: 2023-12-17 12:02:58 浏览: 89

以下是一个background-image的案例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Background Image Example</title> <style> body { background-image: url('https://images.unsplash.com/photo-1576673436903-128c3e8c2882'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; font-family: Arial, sans-serif; color: #fff; text-align: center; padding: 50px; } h1 { font-size: 50px; margin-top: 0; text-shadow: 2px 2px #000; } p { font-size: 24px; line-height: 1.5; max-width: 600px; margin: 30px auto; background-color: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; } </style> </head> <body> <h1>Welcome to Our Website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in consequat orci. Quisque tempor justo vitae dui eleifend congue. Proin molestie lectus non justo egestas, quis iaculis mi maximus. Etiam ac enim vel eros dapibus pretium. Integer elementum mauris eget ante fermentum, vitae vehicula nisi luctus. Donec sit amet mauris eu dolor pharetra tincidunt sed et elit.</p> </body> </html> ``` CSS样式中使用了background-image属性，将背景图片设置为了一张来自Unsplash网站的图片。background-size属性设置为cover，使图片能够填充整个页面；background-repeat属性设置为no-repeat，使图片不重复出现；background-attachment属性设置为fixed，使图片固定不动，随着页面滚动而不移动。在页面中还有一个h1标题和一段文本，使用了一些其他的CSS样式来美化页面。文本部分的背景色使用rgba来设置，使其半透明，能够看到背景图片。

阅读全文