<!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>

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

  1. iOS关于UILabel 基本属性 背景图片 背景色

    [代码] iOS关于UILabel 基本属性 背景图片 背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  2. Android TextView背景颜色与背景图片设置

    Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...

  3. BaseAdapter使listview设置不同背景图片并添加selector

    前段时间为了实现根据item不同的内容实现不同的背景色google了好久只找到了个隔行换色,通过自定义SimpleAdapter终于实现了此功能,但是定义了selector并没有触发点击效果.今天重新 ...

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

    问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...

  5. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  6. ThinkPHP5生成二维码图片与另一张背景图片进行合成

    1.PHP方法 public function do_qrcode(){ Vendor('Qrcode.phpqrcode'); Vendor('Qrcode.Compress'); $object ...

  7. uniapp 设置背景图片

    uniapp 由于其特殊机制,导致了背景图片不能引用本地图片.只能通过 转成 base64 来进行设置 附上链接:https://oktools.net/image2base64 图片转成base64 ...

  8. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  9. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  10. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

随机推荐

  1. aspectj 简单的模拟权限检查、事务、日志记录

    package com.ij34.service; public class Hello { public void he() { System.out.println("执行Hello的h ...

  2. 服务器体系(SMP, NUMA, MPP)与共享存储器架构(UMA和NUMA)

    1. 3种系统架构与2种存储器共享方式 1.1 架构概述 从系统架构来看,目前的商用服务器大体可以分为三类 对称多处理器结构(SMP:Symmetric Multi-Processor) 非一致存储访 ...

  3. 【底层原理】深入理解Cache （下）

    得到了我的PC的cache参数如下: L1 Cache : 32KB , 8路组相连,linesize为 64Byte 64个组 L2 Cache:256KB 8路组相连,linesize为 64By ...

  4. 【2018.10.11 C与C++基础】C Preprocessor的功能及缺陷（草稿）

    一.前言及参考资料 C Preprocessor即所谓的C预处理器,C++也继承了C的预处理程序,但在C++语言的设计与演化一书中,C++的设计者Bjarne Strustrup提及他从未喜欢过C预处 ...

  5. March 07th, 2018 Week 10th Wednesday

    Better later than never. 亡羊补牢,时犹未晚. Time and again all of us are told to complete the tasks assigned ...

  6. Python 列表&元组&字典&集合

    列表(list) 有序性,可存储任意类型的值 通过偏移存取,支持索引来读取元素,第一个索引为0 ,倒数第一个索引为-1 可变性 ,支持切片.合并.删除等操作 可通过索引来向指定位置插入元素 可通过po ...

  7. 《Java大学教程》—第6章 类和对象

    6.2 对象:结构化编程-->数据-->封装(聚合,信息隐藏)-->对象(方法及其操作的数据都聚合在一个单元中,作为更高层的组织单元)-->类(创建对象的模板)6.3 类:*  ...

  8. Photoshop怎么破解？PS怎么破解？

    Photoshop和PS这两个软件可以说是十分常见的图片处理软件了,Photoshop主要处理以像素所构成的数字图像进行图片编辑工作,而PS就更加强大了,它有很多功能,在图像.图形.文字.视频.出版等 ...

  9. 【C编程基础】多线程编程

    基础知识 1.基本概念 (1)线程,即轻量级进程(LWP:LightWeight Process),是程序执行流的最小单元. 线程是进程中的一个实体,是被系统独立调度和分派的基本单位. (2)线程同步 ...

  10. Spring Boot web API接口设计之token、timestamp、sign

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/vbirdbest/article/details/80789817一:token 简介Token:访 ...