从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小

只需要在css样式里对BODY元素添加css样式即可

html代码如下

<STYLE TYPE="text/css">
BODY {background-image: URL(../../ui/loading/loading_page.png);background-position: center; background-repeat: no-repeat;background-attachment: fixed;
}
</STYLE>

元素介绍：

要显示的背景图URL地址！

background-image:

背景图的起始位置

background-position: bottom;

可取以下参考属性

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

设置背景图的平铺模式

background-repeat;

可取以下参考属性

no-repeat//不允许平铺

需要设置background-attachment属性才能确保在Firefox 和 Opera中正常显示

background-attachment

可取以下参考属性：

fixed

css代码

BODY {background-image: URL(../../ui/loading/loading_page.png);background-position: center; background-repeat: no-repeat;background-attachment: fixed;
}

从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小相关推荐

从0开始html前端页面开发_CSS设置图像透明度
1.css语法 opacity IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度.opacity 属性能够设置的值从 0.0 到 1.0 ...
从0开始html前端页面开发_CSS设置图像边框阴影
1.css阴影样式语法: box-shadow 2.语法 div{box-shadow:0 0 1px #000 inset;} 代表边框间距靠左0 靠上0 和1px阴影范围阴影颜色为黑色(#000 ...
从0开始html前端页面开发_CSS设置图像圆角
1.css语法: border-radius 2.语法结构 div{border-radius:5px;} 设置DIV对象盒子四个角5像素圆角效果 div{border-radius:5px 0;} ...
从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
用CSS实现非常简单只需要在style样式里添加transition过度样式即可在hover状态里使用transform变换样式即可 transform:scale//比例 <style ty ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
从0开始html前端页面开发_HTML各标签介绍
<BODY> body 元素是定义文档的主体.body 元素包含文档的所有内容(比如文本.超链接.图像.表格和列表等等.)body是用在网页中的一种HTML标签,标签是用在网页中的一种HT ...
从0开始html前端页面开发_调用com组件（ActiveX）
使用object标签加载本地控件: <object classid="guid" id="test_com" width="100" ...
web开发入门，css背景图片自适应屏幕宽度
现如今,我们经常可以看到很多互联网员工都在抱怨,不是说收入低了,就是说工作时间太长.所以我们会见到有不少优秀的互联网员工,只要有机会,要么去一些学校当老师,要么当公务员之类比较稳定的岗位,当然这些能够 ...
喵喵电影-前端页面开发
喵喵电影-前端页面开发一.项目预览二.开发前准备 1.配置node环境:npm cnpm 2.安装Vue脚手架:vue-cli 3.创建项目 miaomiao 三.实战开发 1.改造项目文件创建框 ...

从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小

从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小相关推荐

最新文章

热门文章