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. 自学git心得-4

    本节介绍分支的一些具体应用实例. 1.Bug分支 设想我们正在分支dev上工作,突然接到一个修复bug的命令,我们需要创建分支issue-101来修复它,在此之前我们肯定需要先保存我们当前未完成的工作 ...

  2. eclipse4.5(mars)环境

    官网下载页面: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/2/ ...

  3. Oracle常用名词解释

    好久没做rac,最近要做架构梳理,这里针对Oracle常用的名词缩写,这里做个记录,希望对大家有所帮助. RAC 全称是Real Application Cluster,oracle的高可用群集,即实 ...

  4. 外部主机无法访问IIS发布的网站

    在IIS中发布网站,在本地可以直接访问,但是其他主机不能访问改发布的网站.   此问题一般是IIS的配置或者防火墙的配置的原因.     如果禁用了以下防火墙入站规则会导致外部主机无法访问本地发布的网 ...

  5. WINDOW各种命令

  6. 掷骰子游戏窗体实现--Java初级小项目

    掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...

  7. 乘风破浪:LeetCode真题_001_TwoSum

    乘风破浪:LeetCode真题_001_TwoSum 一.前言 沉寂了很长时间,也悟出了很多的道理,写作是一种业余的爱好,是一种自己以后学习的工具,是对自己过往的经验积累的佐证,是检验自己理解深入度的 ...

  8. 8个PHP数组面试题

    1.写函数创建长度为10的数组,数组中的元素为递增的奇数,首项为1. 代码如下: <?php function arrsort($first,$length){ $arr = array(); ...

  9. php中的extract函数

    extract函数用来将一个数字分解成多个变量直接使用,下面是W3C的解释:PHP extract() 函数从数组中把变量导入到当前的符号表中.对于数组中的每个元素,键名用于变量名,键值用于变量值.第 ...

  10. 【OpenCV】三种方式操作图像像素

    OpenCV中,有3种访问每个像素的方法:使用at方法.使用迭代器方法.使用指针 运行如下程序后可以发现使用at方法速度最快. 代码如下: //操作图像像素 #include <opencv2/ ...