背景图像位置css_CSS背景图像大小教程–如何对整页背景图像进行编码
背景图像位置css
This tutorial will show you a simple way to code a full page background image using CSS. And you'll also learn how to make that image responsive to your users' screen size.
本教程将向您展示一种使用CSS编写整页背景图像的简单方法。 您还将学习如何使图像响应用户的屏幕尺寸。
Making a background image fully stretch out to cover the entire browser viewport is a common task in web design. Fortunately, this task can be taken care of with a few lines of CSS.
使背景图像完全伸展以覆盖整个浏览器视口是Web设计中的常见任务。 幸运的是，可以使用几行CSS来完成此任务。
用图像覆盖视口 (Cover Viewport with Image)
First, we will want to make sure our page actually covers the entire viewport:
首先，我们要确保我们的页面实际上覆盖了整个视口：
html {min-height: 100%;
}Inside html, we will use the background-image property to set the image:
在html内部，我们将使用background-image属性设置图像：
background-image: url(image.jpg); /*replace image.jpg with path to your image*/“背景大小”属性的魔力 (Magic of 'Background-Size' Property)
The magic happens with the background-size property:
神奇之处在于background-size属性：
background-size: cover;cover tells the browser to make sure the image always covers the entire container, in this case html. The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.
cover告诉浏览器确保图像始终覆盖整个容器，在本例中为html 。 即使浏览器必须拉伸图像或从边缘切掉一点，浏览器也将覆盖它。
Because the browser may stretch the image, you should use a background image that has high enough resolution. Otherwise the image may appear pixelated.
因为浏览器可能会拉伸图像，所以您应该使用分辨率足够高的背景图像。 否则，图像可能会显得像素化。
If you care about having all of the image appear in the background, then you will want to make sure the image is relatively close in aspect ratio compared to the screen size.
如果您想让所有图像都出现在背景中，那么您将要确保图像的长宽比与屏幕尺寸相比相对接近。
如何微调图像位置并避免平铺 (How to Fine Tune an Image Position and Avoid Tiling)
The browser can also choose to display your background image as tiles depending on its size. To prevent this from happening, use no-repeat:
浏览器还可以选择根据背景图像的大小将其显示为图块。 为防止这种情况发生，请使用no-repeat ：
background-repeat: no-repeat;To keep things pretty, we will keep our image always centered:
为了保持美观，我们将图像始终居中：
background-position: center center;This will center the image both horizontally and vertically at all times.
这将始终使图像水平和垂直居中。
We have now produced a fully responsive image that will always cover the entire background:
现在，我们生成了一个完全响应的图像，它将始终覆盖整个背景：
html {min-height: 100%;background-image: url(image.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;
}滚动时如何固定图像 (How to Fix an Image in Place When Scrolling)
Now, just in case you want to add text on top of the background image and that text overflows the current viewport, you may wish to make sure your image stay in the background when the user scrolls down to see the rest of the text:
现在，以防万一您想在背景图像上方添加文本并且该文本溢出当前视口，您可能希望确保当用户向下滚动以查看文本的其余部分时图像保留在背景中：
background-attachment: fixed;You can include all of the background properties described above using short notation:
您可以使用短记号包括上述所有背景属性：
background: url(image.jpg) center center cover no-repeat fixed;可选：如何为移动设备添加媒体查询 (Optional: How to Add a Media Query for Mobile)
To add some icing on the cake, you may wish to add a media query for smaller screens:
要为蛋糕锦上添花，您可能希望为较小的屏幕添加媒体查询：
@media only screen and (max-width: 767px) {html {background-image: url(smaller-image.jpg);}
}You can use Photoshop or some other image editing software to downsize your original image to improve page load speed on mobile internet connections.
您可以使用Photoshop或其他一些图像编辑软件来缩小原始图像的尺寸，以提高移动Internet连接上的页面加载速度。
So now that you know the magic of creating a responsive, full page image background, it is time to go create some beautiful websites!
因此，既然您知道创建自适应的全页图像背景的魔力，那么现在该创建一些漂亮的网站了！
是否想查看更多Web开发技巧和知识？ (Want to See More Web Development Tips and Knowledge?)
Subscribe to my weekly newsletter
订阅我的每周新闻
Visit my blog at 1000 Mile World
访问我在1000 Mile World上的博客
Follow me on Twitter
在Twitter上关注我
翻译自: https://www.freecodecamp.org/news/css-full-page-background-image-tutorial/
背景图像位置css
相关文章：
复习es6-解构赋值+字符串的扩展
1. 数组的解构赋值 从数组中获得变量的值，给对应的声明变量赋值,，有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值，当赋值时候为undefined时候，默认是个函数就会执行函数 2.对象解构赋值 与…
Adobe源码泄漏？3行代码搞定，Flash动画无缝导入Android/iOS/cocos2dx（二）
[注] iOS代码已重构，效率提升90%，200层动画不卡。[2016.10.27] 上一篇 点此阅读 简要介绍了FlashToAnimation的功能，也就是将flash动画无缝导入到Android/iOS及cocos2dx中运行, 这一篇介绍这个库的使用方法。点此查看源码。 准备工作 首先…
the user operation is waiting for building workspace to complete解决办法
如果你在开发android应用程序中总是出现一个提示，显示“the user operation is waiting for "building workspace" to complete”，解决办法如下： 1.选择菜单栏的“Project”,然后把菜单栏中“Build Automatically”前面的对钩去掉。…
ios开发趋势_2020年将成为iOS应用开发的主要趋势
ios开发趋势Technology has always brought something new with time. And with these ever-changing technologies, you need to stay updated to get all the benefits from whats new. 随着时间的流逝，技术总是带来新的东西。 借助这些不断变化的技术，…
http 权威指南 目录
第一部分 HTTP：Web的基础 第1章 HTTP概述 1.1 HTTP——因特网的多媒体信使 1.2 Web客户端和服务器 1.3 资源 1.3.1 媒体类型 1.3.2 URI 1.3.3 URL 1.3.4 URN 1.4 事务 1.4.1 方法 1.4.2 状态码 1.4.3 Web页面中可以包含多个对象 1.5 报文 1.6 连接 1.6.1 TCP/IP 1.6…
java初学者笔记总结day9
异常的概念throwable：异常，程序非正常执行的情况error：错误，程序非正常执行的情况，这种问题不能处理，或不应该处理exception：例外，程序非正常执行的情况，这种问题可以通过…
1小时学会：最简单的iOS直播推流（一）介绍
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
leetcode dfs_深度优先搜索：具有6个Leetcode示例的DFS图遍历指南
leetcode dfsHave you ever solved a real-life maze? The approach that most of us take while solving a maze is that we follow a path until we reach a dead end, and then backtrack and retrace our steps to find another possible path. 您是否解决了现实生活中的迷…
MySQL排序原理与MySQL5.6案例分析【转】
本文来自：http://www.cnblogs.com/cchust/p/5304594.html，其中对于自己觉得是重点的加了标记，方便自己查阅。更多详细的说明可以看沃趣科技的文章说明。 前言 排序是数据库中的一个基本功能，MySQL也不例外。用户通过Order by…
7.RabbitMQ RFC同步调用
RabbitMQ RFC同步调用是使用了两个异步调用完成的，生产者调用消费者的同时，自己也作为消费者等待某一队列的返回消息，消费者接受到生产者的消息同时，也作为消息发送者发送一消息给生产者。参考下图： 调用流程如下&…
1小时学会：最简单的iOS直播推流（二）代码架构概述
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
sh脚本每天创建一个文件夹_我每天创建一个月的视频。 这就是发生的事
sh脚本每天创建一个文件夹At the end of 2019 I promised that 2020 would be all about my YouTube channel. So thats what Ive been doing. 😃 在2019年底，我保证2020年将成为我的YouTube频道的全部 。 这就是我一直在做的。 😃 On the f…
1小时学会：最简单的iOS直播推流（三）使用系统接口捕获音视频数据
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
什么是bower
Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。 准备工作 安装node环境:node.js安装Git&#x…
ES6中export及export default的区别
在ES6中，export和export default均可用于导出常量、函数、文件、模块等，你可以在其他文件或模块中通过import (常量 | 函数 | 文件 | 模块)名的方式将其导入，以便能够对其进行使用，但在一个文件或模块中，export、impo…
sm2加密算法实例_实例说明加密算法
sm2加密算法实例Cryptography, at its most basic, is the science of using codes and ciphers to protect messages. 密码学从根本上讲就是使用代码和密码保护消息的科学。 Encryption is encoding messages with the intent of only allowing the intended recipient to un…
git---远程仓库版本回滚
开发中，发现有错误版本提交带远程分支master，怎么处理？ 1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况，于是做了一下研究，写下这篇博客。 2 问题 如果提交了一个错误的版本，怎么回退版本&#x…
1小时学会：最简单的iOS直播推流（四）如何使用GPUImage，如何美颜
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
团队任务四（无图）
任务要求： WBS练习对团队项目进行任务分解要求所有人共同参与队长列出需求成员进行估计队长领导大家达成共识形成团队报告，发至团队博客项目分解： 一、手机监控(24h) （1）手机当前运行程序监控（用以观察用户…
react测试组件_测试驱动的开发，功能和React组件
react测试组件This article is part of my studies on how to build sustainable and consistent software. In this post, we will talk about the thinking behind the testing driven development and how to apply this knowledge to simple functions, web accessibility,…
CDOJ 1073 线段树 单点更新+区间查询 水题
H - 秋实大哥与线段树Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Submit Status Practice UESTC 1073Appoint description: System Crawler (2016-04-24)Description “学习本无底，前进莫徬徨。” 秋实大哥对一旁玩手机的学…
1小时学会：最简单的iOS直播推流（五）yuv、pcm数据的介绍和获取
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
beta冲刺第一天
1、今天解决的进度 成员进度陈家权回复界面设计，由于成员变动加上和其他成员距离较远，服务器404赖晓连改进Alpha版本页面没能及时更新的问题雷晶获取提问问题时间更新到数据库林巧娜今天的任务是夜间模式功能块，没有完成，查找了很…
angular绑定数据_Angular中的数据绑定说明
angular绑定数据数据绑定 (Data Binding) 动机 (Motivation) Data often defines the look of an application. Interpreting that data into the user interface involves class logic (.component.html) and a template view (.component.ts) . Angular connects them throug…
WPF判断两个时间大小避免误差
进行查询操作的时候，经常用到判断开始时间和结束时间大小的条件，由于从控件上获取的时间除了年月日时分秒，还包括毫秒、微秒等，导致直接判断时间大小的时候会产生一些误差，如下： 结果分析：年月日…
1小时学会：最简单的iOS直播推流（六）h264、aac、flv介绍
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
分享一款Markdown的css样式
使用 本样式在这个样式的基础上做了一些修改， 主要是对于表格和代码块以及一些细节的修改。 主要目的是用在chrome的扩展 Markdown Preview Plus中， 替换其内置的样式。 由于 Markdown Preview Plus对css文件大大小有要求（小于8K）…
远程桌面怎么持续连接_如何拥有成功且可持续的远程产品管理职业
远程桌面怎么持续连接Remote work is rapidly growing in all industries. Some professionals might try to push away this new way of working, seeing it as simply a current necessity. They might not think its fit for a product manager who’s constantly managing …
1小时学会：最简单的iOS直播推流（七）h264/aac 硬编码
最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有…
Linux日常命令记录
1、查找进程 ps -ef | grep javajps 2、杀死进程 kill -9 1827 3、进入tomcat中的日志文件夹 cd logs 4、查看日志 tail -f catalina.outtail -n 10000 catalina.out 5、查看tomcat的连接数 ss -nat|grep -i "8081"|wc -lnetstat -nat | grep -i "8081" | …