html - 身体上的背景图像 - 图像已放大
问题描述
我想在 body 元素上放置一个背景图像,以便在整个浏览器屏幕上拉伸。
问题是,在执行此操作时,图像会得到一些“放大”,并且图像会因此而被剪切。
例如,让这个当前图像:
http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg
并查看它如何缩放图像并切割周围的一些部分。
我尝试过使用 CSS 背景封面功能,但没有运气。
body {
background-image: url('https://i.stack.imgur.com/7xThY.jpg');
background-size: cover, 100%;
background-position: 50% 50%;
background-attachment: fixed;
}
解决方案
你的意思是这样的吗?
html{
min-height:100%;
position:relative;
}
body {
height: 100%;
background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
}
我没有把它放在一个片段中,因为代码在其中不起作用。我在 chrome、firefox、edge 甚至 Internet Explorer 中尝试过,它似乎工作正常。希望这可以帮助。
推荐阅读
- php - 如何在 php 中将此 css 样式应用于此表
- python - 开发一个模型来预测最小化“均方根误差”函数的目标变量是什么意思?
- google-cloud-platform - 如果用户查询公共 BigQuery 数据库,数据所有者能否看到已执行的查询
- java - 铸造通用数组
- neo4j - 在 Neo4j 中存储元数据的有效方法
- nativescript - 如何在组件 nativescript 中显示来自函数的数据?
- javascript - 如何遍历 Puppeteer 创建的屏幕截图图像的像素颜色并绘制矩形并保存到文件
- hive - 将配置单元表作为单个文件输出到 HDFS
- java - gradle mutlimodule 项目中使用 Jacoco 离线检测的跨模块代码覆盖率
- swift - 在 SwiftUI 中为 TotalValue 添加列表值