html内容与背景图片的相对位置保持不变 background-position: center

本文介绍了一种在屏幕缩放时使背景图片与内容元素的相对位置保持不变的方法。通过设置CSS属性,如使用background-position:center; 和 background-size:cover;,确保了无论屏幕尺寸如何变化,背景图的关键特征点都能维持其原有的相对位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

缩放屏幕的时候,希望背景图和内容元素的相对位置保持不变。background-position: center;

div {
	background-image: url('../../public/images/my-picture.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

缩窄屏幕前:
在这里插入图片描述
缩窄屏幕后:
在这里插入图片描述
表单背后的背景图的特征点的相对位置保持大致不变。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学习天地</title> {% load static %} <!-- 加载静态文件标签 --> <style> /* 设置背景图片 */ body { min-height: 10vh; /* 设置最小高度为视口高度 */ margin: 0; /* 移除默认边距 */ padding: 0; /* 移除默认内边距 */ font-family: Arial, sans-serif; background-image: url("{% static &#39;images/学习天地.jpg&#39; %}"); <!-- 使用静态文件标签加载图片 --> background-size: cover; /* 宽度 300px,高度自动调整 */ background-position: center; <!-- 图片居中显示 --> background-attachment: fixed; background-repeat: no-repeat; <!-- 防止图片重复 --> color: white; <!-- 设置文字颜色为白色,确保在背景上清晰可见 --> } /* 其他样式保持不变 */ .course-list { list-style-type: none; padding: 0; } .course-item { background-color: rgba(249, 249, 249, 0.8); <!-- 添加透明度,使背景图片可见 --> margin: 10px 0; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .course-item a { color: #007BFF; text-decoration: none; } .course-item a:hover { text-decoration: underline; } .pagination { margin-top: 20px; text-align: center; } .pagination a { margin: 0 5px; color: #007BFF; text-decoration: none; } .pagination a:hover { text-decoration: underline; } </style> </head> <body> <h1 style="font-size: 100px; color:rgb(14, 84, 204);">学习天地</h1> <a href="{% url &#39;home&#39; %}" style="font-size: 50px; color:rgb(183, 118, 5);">点击进入主页</a> </body> </html>代码运行后,浏览器只能显示背景图片的一部分
03-19
<style scoped> .container { padding: 20rpx; padding-bottom: 120rpx; /* 为底部按钮留出空间 */ background-color: #f5f7fa; min-height: 100vh; } .header { background-color: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .privacy-notice { margin-top: 20rpx; padding: 15rpx 20rpx; background-color: #f0f7ff; /* 浅蓝色背景突出显示 */ border-radius: 12rpx; font-size: 26rpx; color: #333; line-height: 1.6; white-space: normal; /* 确保自动换行 */ word-wrap: break-word; /* 长单词自动换行 */ text-align: justify; /* 两端对齐 */ border: 1rpx solid #d0e6ff; /* 浅蓝色边框 */ } .title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; text-align: center; } .info { display: flex; justify-content: center; font-size: 28rpx; color: #666; } .info text { background-color: #f0f7ff; padding: 5rpx 15rpx; border-radius: 8rpx; margin: 0 10rpx; } .questions-section { background-color: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .section-title { font-size: 32rpx; font-weight: bold; color: #333; padding-bottom: 20rpx; border-bottom: 1rpx solid #eee; margin-bottom: 30rpx; } .question-item { margin-bottom: 40rpx; padding-bottom: 30rpx; border-bottom: 1rpx dashed #eee; } .question-item:last-child { border-bottom: none; } .question-content { display: flex; margin-bottom: 20rpx; font-size: 28rpx; line-height: 1.6; } .question-number { font-weight: bold; min-width: 50rpx; color: #007aff; } .rating-container { display: flex; align-items: center; justify-content: space-between; } .stars { display: flex; } .star { font-size: 40rpx; color: #ccc; margin-right: 15rpx; transition: all 0.2s; cursor: pointer; } .star.filled { color: #ffb400; } .star.active { transform: scale(1.2); } .rating-text { font-size: 24rpx; color: #666; min-width: 180rpx; text-align: right; } .editor-container { border: 1rpx solid #e0e0e0; border-radius: 12rpx; overflow: hidden; margin-top: 20rpx; } .editor { min-height: 300rpx; padding: 20rpx; font-size: 28rpx; } .loading { display: flex; justify-content: center; padding: 40rpx 0; } .error-panel { background-color: #ffebee; border-radius: 12rpx; padding: 30rpx; display: flex; flex-direction: column; align-items: center; margin: 20rpx 0; } .error-panel text { color: #d32f2f; margin-bottom: 20rpx; text-align: center; } .bottom-buttons { position: fixed; bottom: 0; left: 0; right: 0; display: flex; padding: 20rpx; background-color: #fff; box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1); } .action-button { flex: 1; height: 90rpx; border-radius: 45rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 500; margin: 0 15rpx; transition: all 0.3s; } .back-button { background-color: #f1f1f1; color: #666; } .back-button:active { background-color: #e0e0e0; } .submit-button { background: linear-gradient(to right, #2979ff, #1a68e8); color: #fff; } .submit-button:active { background: linear-gradient(to right, #1a68e8, #0a57d0); } .submit-button[disabled] { background: #a0c0ff; opacity: 0.7; } </style>
最新发布
07-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值