1、background-position: 当背景图很大时,可以让其固定显示在不同的位置。剩下的会隐藏。

  引入背景图片:background-image: url("img/banner.jpg");

background-position参数:

  •   水平起始位置(left center right %)可以用这四种形式的任意一种
  •   垂直起始位置(top center bottom %)可以用这四种形式的任意一种

实例:

 background-position: right top;、、、、、、值的顺序没有关系

 background-position: 40% center;、、、、、、、、百分比表示从图的左边向右边的百分之多少开始显示。

 background-position: right;、、、、一个值表示从right边的图的中间开始显示

2、background-attachment: fixed

    固定定位相当于position:fixed

作用:用于固定背景图

background-attachment: fixed; 必须是背景图达到产生滚动条才会看到他的效果,否则不会起作用的

background-image大小和位置的设置的更多相关文章

  1. css3-11 如何改变背景图片的大小和位置

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  2. frame、bounds表示大小和位置的属性以及center、position、anchorPosition

    在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间 ...

  3. WPF编程,窗口保持上次关闭时的大小与位置。

    原文:WPF编程,窗口保持上次关闭时的大小与位置. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/details/8 ...

  4. Python3 Selenium WebDriver网页的前进、后退、刷新、最大化、获取窗口位置、设置窗口大小、获取页面title、获取网页源码、获取Url等基本操作

    Python3 Selenium WebDriver网页的前进.后退.刷新.最大化.获取窗口位置.设置窗口大小.获取页面title.获取网页源码.获取Url等基本操作 通过selenium webdr ...

  5. Selenium WebDriver-网页的前进、后退、刷新、最大化、获取窗口位置、设置窗口大小、获取页面title、获取网页源码、获取Url等基本操作

    通过selenium webdriver操作网页前进.后退.刷新.最大化.获取窗口位置.设置窗口大小.获取页面title.获取网页源码.获取Url等基本操作 from selenium import ...

  6. windowsclient开发--使你的client执行时记住上次关闭的大小和位置

    差点儿全部的windowsclient都能够调整大小,所以用户依据自己的喜好调整client的大小和位置. 可是当该client退出后,又一次执行client的时候.我们往往又要调整自己喜好的大小和位 ...

  7. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  8. 样式操作案例5-改变box的大小和位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. atitit.自适应设计悬浮图片的大小and 位置

    atitit.自适应设计悬浮图片的大小and 位置 #--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:- ...

随机推荐

  1. MyBatis基本配置和实践(五)

    第一步:创建一个Maven工程 第二步:编辑Maven工程的pom.xml,引入mybatis-generator-maven-plugin <?xml version="1.0&qu ...

  2. c#之委托详解(Delegate)

    一.委托的概念 在我们学习委托之前,我们来了解下,什么是委托呢? 官方概念:委托是一种安全地封装方法的类型,它与 C 和 C++ 中的函数指针类似.与 C 中的函数指针不同,委托是面向对象的.类型安全 ...

  3. 主存储器与CPU的连接

    半导体存储器的读写时间一般在十几至几百毫微秒之间,其芯片集成度高,体积小,片内含有译码器和寄存器等电路.常用的半导体存储器芯片有多字一位片和多字多位片,如16M位容量的芯片可以有16M×1位和4M×4 ...

  4. webpack环境搭建开发环境,JavaScript面向对象的详解,UML类图的使用

    PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...

  5. php-fpm配置参数.md

    Global Options pid string PID文件的位置.默认为空.默认路径放在/usr/local/php-fpm/var. error_log string 错误日志的位置.默认:安装 ...

  6. 报错 Filtered offsite request

    用scrapy框架迭代爬取时报错 scrapy日志: 在 setting.py 文件中 设置 日志 记录等级 LOG_LEVEL= 'DEBUG' LOG_FILE ='log.txt' 观察 scr ...

  7. 关于使用 CALayer 中 mask 的一些技巧

    CALayer 拥有 mask 属性,Apple 的官方解释如下: An optional layer whose alpha channel is used to mask the layer’s ...

  8. 3669. [NOI2014]魔法森林【LCT 或 SPFA动态加边】

    Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...

  9. 2、Android-UI(自定义控件&ListView)

    2.4.系统控件不够用创建自定义控件 控件的和布局的集成结构: 所有的控件都是间接或者直接集成View的 所有的布局都是直接或者间接继承自ViewGroup的 View是Android种最基本的一种U ...

  10. cesium.js 设置缩放最大最小限制

    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1200;viewer.scene.screenSpaceCameraCo ...