H5 34-背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-背景图片</title>
    <style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
        }
    </style>
</head>
<body>
<!--
1.如何设置背景图片?
在CSS中有一个叫做background-image: url();的属性, 就是专门用于设置背景图片的

快捷键:
bi background-image: url();

注意点:
1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
-->
<div class="box1"></div>
</body>
</html>
时间: 2024-12-21 04:38:43

H5 34-背景图片的相关文章

android 背景图片滚动

昨天在给客户端做天气展示页面的时候,发现很多app的天气页面背景图片都会缓慢移动,形成了一种3d的感觉.例如下雨,静态图片缓慢移动,雨滴位置变换感觉就真的在下雨.云朵的移动也很酷.于是研究了一下午.写了一个自定义view控件. 我的自定义控件继承了view,重写ondraw方法.本人C#转android才3个月,以下代码如有错或者有可以改进的地方,请各位在评论中指出.望不吝赐教! ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片.单靠jquery和图片,你便可以做出不同的效果.由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作.这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用. 1 <!doctype html> 2 <html lang="e

Windows界面编程-背景图片、透明特效使用

Windows界面编程第一篇 位图背景与位图画刷 可以通过WM_CTLCOLORDLG消息来设置对话框的背景,MSDN上对这个消息的说明如下: The WM_CTLCOLORDLG message is sent to a dialog box before the system draws the dialog box. By responding to this message, the dialog box can set its text and background colors us

063为文本输入框设置背景图片

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController<UITextFieldDelegate> 4 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController () 4 - (void)layoutUI; 5 @end 6

132设置被选中单元格的背景颜色(扩展知识:设置被选中单元格的背景图片)

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UITableViewController 4 @property (strong, nonatomic) NSArray *arrDataSource; 5 @property (strong, nonatomic) NSArray *arrSelectionStyle; 6 7 @end ViewController.m 1 #i

安卓微信端打开H5页面背景图被键盘挤压移动位置解决

问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为(100%-键盘高度).所以要再强行把高度调整回去. 未调整前:背景被挤压,导致下部出现空白背景 调整后: 插入js代码调整高度 1 $(document).ready(function () { $('body').css({'heigh

MFC 加入背景图片并让控件背景透明

/*加入背景图片*/ BOOL CTOOLDlg::OnEraseBkgnd(CDC* pDC) { // TODO: 在此加入消息处理程序代码和/或调用默认值 CDialog::OnEraseBkgnd(pDC); HBITMAP   m_hBitmap; HDC           m_hBkDC; m_hBitmap   =   ::LoadBitmap(::GetModuleHandle(NULL),MAKEINTRESOURCE(IDB_BITMAP2)); m_hBkDC     =

练习,背景图片开发慕课网右下角工具条

前几天学的慕课的一个课程,侧栏工具条开发.这门课程主要的学习价值: 1. 讲解的案例场景很实用,用到的技术点也较多,主要有css精灵,background-position,css transition,requirejs,sass,图标字体等: 2. 原理分析彻底,html结构清晰,sass逻辑合理,最重要的是在讲解过程中体现出的工作方法和工作态度,都能看出讲师的一些优秀的职业素质: 这门课的练习价值: 1. 掌握以上提到的知识点. 2. 看看在这个过程中会有哪些思考总结. 今天实现的方式是第

quick-cocos2d-x教程9:实例之加上背景图片

在梳理完quick-cocos2d-x框架的各个目录后,我们开始我们的实例教程,在helloworld后面,加上一张图片,lua编辑器,我用的lua editor,还不错. 我们首先还是参照教程,创建一个game01.命令:create_project -p com.cocos2dlua.game01 -r landscape,这次命令,我加了一个-r,设置为横向的屏幕 用quickplayer 打开game01, 显示helloworld,正常. 然后把game01\scripts目录下的co