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. 从零开始——Java异常处理机制

    在编程的时候,总是出现需要throws的情况,然后需要在SQLException和Exception中进行选择,看着名字,总有一种错觉,认为SQLException是Exception的一个子类,因此 ...

  2. Intel酷睿前世今生(一)

    Intel酷睿系列自诞生起就树立了桌面CPU霸主的地位,酷睿i系列更是无人能敌.它是Intel阻击AMD多核构架的救赎主,也是AMD复兴梦想的收割者.而Intel酷睿系列已经经历几代了,不知还有多少看 ...

  3. 如何对iPhone进行屏幕录像

    如何对iPhone进行屏幕录像 录制时候的效果: 1. 打开QuickTime Player 2. 在文件中新建影片录制 3. 然后酱紫录制

  4. iso、ios、osi的区别

    ISO  国际标准化组织(International Organization for Standardization)简称ISO,是一个全球性的非政府组织,是国际标准化领域中一个十分重要的组织.IS ...

  5. UNIX crontab自动执行脚本

    crontab 是不会加载环境变量的你手动执行可以是因为登录了oracle用户加载了环境变量,你可以在脚本里添加,echo $ORACLE_HOME  echo $ORACLE_SID 等等试试,看看 ...

  6. scala简介

    1.什么是Scala scala官方网址: http://www.scala-lang.org Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行 ...

  7. cogs [HZOI 2015]有标号的二分图计数

    题目分析 n个点的二分染色图计数 很显然的一个式子 \[ \sum_{i=0}^n\binom{n}{i}2^{i(n-i)} \] 很容易把\(2^{i(n-i)}\)拆成卷积形式,前面讲过,不再赘 ...

  8. Ubuntu下命令行安装jdk,android-studio,及genymotion虚拟机来进行android开发

    安装JDK 从oracle官网下最新版的linux64位的jdk包(现在最新为jdk-8u92-linux-x64.tar.gz) 命令如下 新建文件夹-解压 sudo mkdir /usr/lib/ ...

  9. 随手练——HDU-2037 、P-2920 时间安排(贪心)

    普通时间安排 HDU-2037 :http://acm.hdu.edu.cn/showproblem.php?pid=2037 选取结束时间早的策略. #include <iostream> ...

  10. robotframwork的WEB功能测试(一)—切换window窗口

    selenium2library提供的切换到新窗口的关键字,只有select window,而且也只能根据title.name.url去定位.如下图所示,明显在实际使用中是不够的. 所以这里总结了一下 ...