添加背景图片将其固定在页面的右下侧95%95%不重复用web怎么写
时间: 2024-09-23 15:07:13 浏览: 48
在网页设计中,将背景图片固定在页面的右下角并占屏幕的95% x 95%,通常需要使用CSS定位技术。下面是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
body {
display: flex;
justify-content: flex-end; /* 将内容向右放置 */
align-items: flex-end; /* 将内容向下放置 */
height: 100%; /* 设置body高度等于视口高度 */
margin: 0; /* 清除默认边距 */
background-image: url('your-image-url.jpg'); /* 替换为你的图片URL */
background-size: cover; /* 背景图片铺满整个区域 */
background-position: right bottom; /* 图片定位到右下角 */
position: relative; /* 确保应用相对定位 */
width: 100%; /* 全屏宽度 */
}
</style>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
```
在这个例子中,`your-image-url.jpg`应替换为你实际的背景图片URL。请注意,如果图片不是正方形,可能会有裁剪效果。如果你想保持原始比例,可以调整`background-size`属性,比如设置为`cover`会自动适应容器大小。
阅读全文