<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>37-背景缩写</title>

    <style>

        div{

            /*width: 500px;*/

            /*height: 500px;*/

            /*

            background-color: red;

            background-image: url(images/girl.jpg);

            background-repeat: no-repeat;

            background-position: left bottom;

            */

            /*background: red url(images/girl.jpg) no-repeat left bottom;*/

            /*background: red;*/

            /*background: url(images/girl.jpg);*/

        }

        body{

            background-image: url(images/girl.jpg);

            background-repeat: no-repeat;

            /*background-attachment: scroll;*/

            background-attachment:fixed;

        }

    </style>

</head>

<body>

<!--

1.背景属性缩写的格式

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

快捷键:

bg+ background: #fff url() 0 0 no-repeat;

2.注意点：

background属性中， 任何一个属性都可以被省略

3.什么是背景关联方式？

默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式

4.如何修改背景关联方式？

在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

格式

background-attachment：scroll;

取值：

scroll 默认值， 会随着滚动条的滚动而滚动

fixed 不会随着滚动条的滚动而滚动

快捷键:

ba background-attachment:;

-->

<div></div>

我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字我是文字

<br>

我是文字

<br>

我是文字

<br>

我是文字

<br>

我是文字

</body>

</html>

H5 37-背景缩写的更多相关文章

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

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

  2. 最全面的H5的背景音效素材（经过实践），分享给你！！！

    个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...

  3. FAutoTest-微信小程序 / 公众号H5 自动化利器

    X5内核H5自动化背景 近来有很多童靴咨询如何做微信小程序/公众号等H5页面来做自动化,之前写了一篇文章微信小程序自动化测试实践 https://www.cnblogs.com/yyoba/p/945 ...

  4. [CSS] css的background及多背景设置

    问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...

  5. CSS元素、边框、背景、列表样式

    一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两 ...

  6. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  7. HTML5实现首页动态视频背景

    话不多说,先看效果图: ​​​ 炫酷吗?你想实现这种动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的: 下载好了之后 ...

  8. 【白话科普】10s 从零看懂 H5

    最近大家有没有发现,很多微信公众号的动态内容变多了?我们常常可以看到,公众号内容中有很多动态图片甚至动画,还可以通过手指滑动切换页面,或者有一些小的点击互动. 这种看起来有点高级的小作品,其实是都是& ...

  9. tp剩余未验证内容-6

    杂项 系统中的电感线圈元件, 虽然不消耗电能, 但是会 占用系统的容量(相当于占用资源但是不做事), 会使系统 的发电量的使用效率降低, 线路损耗增大, 发出同样有功用电量所需的设备容量扩大 将感性元 ...

随机推荐

  1. Oracle EBS FORM 设置块属性

    declare blk_id BLOCK; begin blk_id := Find_block('ADRP_HEADER'); Set_block_property(blk_id,insert_al ...

  2. mysql表分区简述

    一. 简介 数据库分区 数据库分区是一种物理数据库设计技术.虽然分区技术可以实现很多效果,但其主要目的是为了在特定的SQL操作中减少数据读写的总量以缩减sql语句的响应时间,同时对于应用来说分区完全是 ...

  3. Cs231n课堂内容记录-Lecture 4-Part1 反向传播及神经网络

     反向传播 课程内容记录:https://zhuanlan.zhihu.com/p/21407711?refer=intelligentunit 雅克比矩阵(Jacobian matrix) 参见ht ...

  4. 轻量的web框架Bottle

    简洁的web框架Bottle 简介 Bottle是一个非常简洁,轻量web框架,与django形成鲜明的对比,它只由一个单文件组成,文件总共只有3700多行代码,依赖只有python标准库.但是麻雀虽 ...

  5. [Hive_3] Hive 建表指定分隔符

    0. 说明 Hive 建表示例及指定分隔符 1. Hive 建表 Demo 在 Hive 中输入以下命令创建表 user2 create table users2 (id int, name stri ...

  6. docker基础学习（一）

    操作演示: 1.查看一个容器的版本 [root@ELK-chaofeng08 ~]# docker version Client: Version: API version: 1.39 Go vers ...

  7. js模块化规范—commonjs

    commonjs规范说明 每个js文件都可当作一个模块 在服务器端: 模块的加载是运行时同步加载的(不会阻塞,等待时间回比较长).在浏览器端: 模块需要提前编译打包处理 commonjs规范基本语法 ...

  8. tensorflow中的Supervisor

    tf.train.Supervisor()可以帮我们简化一些事情,可以保存模型参数和Summary,它有以下的作用: 1)自动去checkpoint加载数据或初始化数据 ,因此我们就不需要手动初始化或 ...

  9. 【转】Windows系统中ckplayer视频边下边放，视频转码mp4及"last atom in file was not a moov atom"问题

    视频转码成mp4格式并添加关键帧: 1.先下载与自己操作系统相对应的的FFmpeg软件.官网传送门:http://ffmpeg.zeranoe.com/builds/ 下载static版的就可以,zi ...

  10. 好程序员分享Javascript设计模式

    方法一 对象字面量表示法 在对象字面量表示法中,一个对象被描述为一组包含在大括号中,以逗号分隔的 name/value 对.对象内的名称可以是字符串或标识符,后面跟着一个冒号.对象中最后一个 name ...