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. Excel 操作总结

    1.excel 表格中换行:Alt+Enter; 2.Excel2003以上版本设置下拉菜单     DATA->Data Validation ->Data Validation -&g ...

  2. 基于TCP/IP的程序设计

    TCP特点 (1)面向连接的传输 (2)端到端的通信 (3)高可靠性,确保传输数据的正确性,不会出现丢失或者乱序 (4)全双工方式传输 (5)采用字节流方式,以字节为单位传输字节序列 (6)紧急数据传 ...

  3. python django 环境搭建

    一. 版本选择 Django 1.5.x 支持 Python 2.6.5 Python 2.7, Python 3.2 和 3.3. Django 1.6.x 支持 Python 2.6.X, 2.7 ...

  4. 为什么懂云的IT高手能过得比你好

    盼望着,盼望着,一年一度的国庆7天长假还有不到24小时就到来了.各个部门的同事都已准备好满世界旅行去了. IT 部门各位同事的心还是悬着,信息系统还要持续的运转,对外的网站不能停,假期的线上促销也不能 ...

  5. [转发]CPU个数、CPU核心数、CPU线程数

    我们在选购电脑的时候,CPU是一个需要考虑到核心因素,因为它决定了电脑的性能等级.CPU从早期的单核,发展到现在的双核,多核.CPU除了核心数之外,还有线程数之说,下面文本就来解释一下CPU的核心数与 ...

  6. Python学习---Django的新工程设置模板

    该模板完全可以在创建好新工程后进行部分代码替换 创建app01的  python startapp app01   创建static子目录 settings.py """ ...

  7. mysql 基础学习1

    安装得方法有很多,这里就不详细介绍了. 进入 mysql 控制台 mysql -uroot -p 查看 有哪些库 show databases; 1.创建一个库 create database tes ...

  8. December 13th 2016 Week 51st Tuesday

    Life is a sail trip full of chances and challenges. 人生的旅途中充满了机遇和挑战. A boat sails on the sea, the vas ...

  9. 求最长公共子串 Longest Common Subsequence

    最长公共子串 // Longest Common Subsequence 子串有别于子序列, 子串是连续的, 而子序列可以不连续 /*--------------------------------- ...

  10. Activator 通过SSH解锁屏幕等手势操作

    来源:https://qunwang6.github.io/blog/Activator/ Activator 发表于 2015-10-24   |   分类于 iOS Activator Activ ...