css设置背景图片大小

时间:2022-10-24 人气:0

网页的某些装饰可以通过背景图片来渲染，使得网页更加美观，CSS设置背景图片，不仅仅是大小，还有位置，放大方式，透明化之类。都是必备的CSS技能。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。演示实例如下：

操作方法

01
对于背景图片的导入，可以选择background 或者background-image格式如下body{backgroud:url("url")}body{backgroud-image:url("url")}background: url(http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png);
02
背景图片的显示方式：repeat : 默认值，背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像仅在横向上平铺repeat-y : 背景图像仅在纵向上平铺代码如下（保存为html文档后用浏览器运行）<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png');background-repeat:no-repeat;background-position:left top;}</style></head><body><h1>Modify</h1><p>no-repeat</p></body></html>
03
由上个例子我们可以发现，其实可以对背景图片进行位置的定位：background-position：top left,；top righ；,bottom right；bottom left;代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;background-position:right top,left top;}</style></head><body><h1>Modify</h1><p>background-position</p><p>right top and left top</p></body></html>
04
所以可以对，background picture设置大小，首先设置窗口大小：格式：width：numbers unit (px)height：numbers unit (px)实例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;width:300px,300px;height:280px,280px;background-position:right top,left top;background-size:contain,contain;}</style></head><body><h1>Modify</h1><p>background-size</p><p>width and height</p></body></html>
05
我们发现对background-size的设置有cover、contain等参数。cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。实例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;width:300px,300px;height:280px,280px;background-position:right top,left top;background-size:contain,cover;}</style></head><body><h1>Modify</h1><p>background-size</p><p>width and height</p></body></html>
06
对图片进行放大与缩小使用background-size：percentage代码实例：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;background-position:50% 50%,100% 100%;background-size:contain,cover;}</style></head><body><h1>Modify</h1><p>background-size</p></body></html>格式如下：background-position : length || lengthbackground-position : position || positionbackground-position-x : length | left | center | rightbackground-position-y : length | top | center | bottom

特别提示

推荐使用浏览器

对背景图片大小的设置可通过多种途径实现

加载全部内容