<!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. Linux如何查看YUM的安装目录

    Linux下如何查看使用YUM安装过的包的安装路径呢? 在搞清楚这个问题前,我们先来了解一下YUM. YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和R ...

  2. ASP.NET MVC从视图传参到控制器的几种形式

    1. 传递数组 $(function () { var value = ["C#", "JAVA", "PHP"]; $("inp ...

  3. PostgreSQL 多级分区

    CREATE TABLE range_list (a int,b timestamp) PARTITION BY RANGE (b); CREATE TABLE range_pa1 PARTITION ...

  4. python爬虫起步...开发环境搭建，最简单的方式

    研究一门编程语言,一般第一步就是配置安装部署相关的编程环境.我认为啊,在学习的初期,大家不是十分了解相关的环境,或者是jar包,python模块等的相关内容,就不需要花费大量的时间去研究如何去安装它. ...

  5. IDEA: Call Hierarchy

    在日常开发中,查看某个方法.字段可能被用在哪些地方.这个是个很常见的操作. 例如,在使用Eclipse时,选择方法后,右键菜单里选择 show call hierarchy,即可查看有哪些地方调用了这 ...

  6. cURL模拟POST提交数据

    首先,是这个代码: <?php //curl模拟post提交数据$url = "http://127.0.0.1/immoc/output.php";$post_data = ...

  7. 适合使用并行的一种bfs

    这种写法的bfs和前面的最大区别在于它对队列的处理,之前的简单bfs是每次从队列中取出当前的访问节点后,之后就将它的邻接节点加入到队列中,这样明显不利于并行化, 为此,这里使用了两个队列,第一个队列上 ...

  8. JDBC复习2

    前面复习了一些基础知识以及如何抽取一些常用的代码,接下来就结合junit4做一个增删改查的小demo 重点是这么几个步骤:1.创建连接 2.编写sql语句 3.编写sql语句的载体 4.如果是Prep ...

  9. TOPWAY智能彩色TFT液晶显示模块

    TOPWAY 20年来专注工业显示, 以为全球工业用户提供稳定可靠和容易使用的液晶显示模块为己任, 智能彩色TFT液晶显示模块(以下简称智能模块), 就是我们在容易使用TFT 彩色液晶显示方向上为广大 ...

  10. SecureCRT8.1+SecureCRT_keygen完成注册

    原文:https://www.cnblogs.com/qiyawei/p/7822957.html 1.下载完secureCRT8.1之后,进行安装. 点击secureCRT.exe的时候会出现如下图 ...