php background,CSS BACKGROUND定位背景上下左右偏移

2023-11-19

css中我们经常使用background加载图片作为背景,这个背景图片可以通过具体属性的设置调整其上下左右偏移,调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子,其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。

background语法格式:

[php]background:[1.color] [2.url(图片路径)] [3.background-repeat平铺属性] [4.水平方向偏移] [5.垂直方向偏移]

background-position:[水平方向偏移] [垂直方向偏移][/php]

我们给一个div加上背景后,先仅仅控制背景图片的路径,其他的都不做控制。这时候背景图片的坐标是左上角,如果图片大小大于div的大小,多出来的部分会被切掉,如果图片大小小于div的大小,默认会在横向和纵向都把图片进行平铺,也就是你会看到好几个背景图片铺着,来把div填满。要取消掉这种效果,使用background-repeat属性。

background-repeat平铺属性的几个值:

[php]repeat : 默认值。背景图像在纵向和横向上平铺

no-repeat : 背景图像不平铺

repeat-x : 背景图像仅在横向上平铺

repeat-y : 背景图像仅在纵向上平铺[/php]

下面来看如何控制背景图片的位置。background的4和5属性和backgroudn-position是控制位置使用的偏移属性,这2个属性分别来控制水平偏移和垂直方向偏移。

位置偏移属性可以取的值有百分数、数值、位置三种。取值是图片的左上角相对于区域左上角的偏移量。向右,向下(x正半轴,y负半轴)为正值;向左,向上(x负半轴,y正半轴)为负值。位置的话,水平方向上是left(靠左),center(居中),right(靠右);垂直方向上是top(靠顶),center(居中),bottom(靠底)。例如:

[php]background:url(your/pic/path) no-repeat 50% 50%;#表示在水平和垂直方向是都是居中的

background-position:50% 50%; #表示在水平和垂直方向是都是居中的

background:url(your/pic/path) no-repeat 10px 10px; #表示以左上角为原点,分别偏移了10px的位置

background-position:10px 10px; #表示以左上角为原点,分别偏移了10px的位置

background:url(your/pic/path) no-repeat left bottom; #表示背景图片靠左下角

background-position:left bottom; #表示背景图片靠左下角[/php]

这三种数

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

php background,CSS BACKGROUND定位背景上下左右偏移 的相关文章

  • 蓝桥杯:斐波那契数列最大公约数

    题目表示的很明确 要用两个算法 斐波那契数列是很经典的dp问题 最大公约数是很经典的辗转相除法 从而我理所应当的就定义一个数组存放斐波那契数列 long long int F 2021 0 F 1 1 F 2 1 for int i 3 i
  • 解决SQL Server占用服务器内存过高问题

    最近发现个问题 数据库服务器内存居高不下 64G的内存 几乎被占用100 结果差点把服务器给拖垮了 第一步 打开SQL Server Management Studio 在连接上右键 属性 第二步 内存选项卡 修改最大服务器内存的大小 如下
  • Android Killer的安装和配置 -安卓逆向的必备神器

    图文并茂 详细的不能再详细了 这你总不能学不会吧 都给我学会 安装包我已经放在了文章末尾 需要可以自取哟 1 下载安卓Android killer 首先 我们先下载打包好的Android killer 解压缩后可以得到一大堆没啥用的 文件
  • 用WinHex软件解析FAT32文件系统

    一 工欲善其事 1 准备工作 将一个U盘格式化为FAT32格式 在U盘内创建几个文件 最好是TXT文档 其中至少有一个是长文件 命名较长 2 补充知识 短文件名表示 长文件名表示 Note 当一个文件名为长文件名时 会由几个长文件名表示法和
  • Linux查看当前目录下各文件所占空间

    要查看当前目录下各文件所占空间 可以使用du命令 磁盘使用情况 配合sort命令来实现 以下是在Linux系统中执行的命令 du sh sort hr 解释一下这个命令 du sh 计算当前目录下每个文件和目录的总大小 并以易读的方式显示
  • 给定一个无重复元素的有序整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表。也就是说,nums 的每个元素都恰好被某个区间范围所覆盖,并且不存在属于某个范围但不属于 n

    class Solution public List
  • 让dapper支持Oracle

    之前的项目数据使用mssql和mysql ORM使用一个轻量级的dapper 感觉很方便 性能也比EF强 关键是语法灵活 上手容易 用这种框架开发了几个网站 感觉非常好 但新项目要使用oracle 就出问题了 dapper里的关键字 在or
  • 史上最全量化交易资源整理

    有些国外的平台 社区 博客如果连接无法打开 那说明可能需要 科学 上网 国内在线量化平台 BigQuant 你的人工智能量化平台 可以无门槛地使用机器学习 人工智能开发量化策略 基于python 提供策略自动生成器 镭矿 基于量化回测平台
  • PCL 大窗口可视化两个点云

    一 主要参数 viewer gt setFullScreen true 设置点云为全屏显示的2D俯视图 二 代码实现 1 一个大窗口可视化两个点云 include
  • 清除history内容

    history记录是记录在 bash history中的 history c 清除的是当前会话的记录 原来的记录是不会被清除的 可以直接删除 bash history 清空这个文件cat dev null gt bash history
  • c++ - 抽象类 和 多态当中一些问题

    抽象类 纯虚函数 在虚函数的后面写上 0 则这个函数为纯虚函数 class A public virtual void func 0 纯虚函数不需要写函数的定义 他有类似声明一样的结构 抽象类概念 我们把具有纯虚函数的类 叫做抽象类 所谓抽
  • C++ 惯用法之 CRTP

    背景 CRTP 是 一种 C 的设计方法 其巧妙的结合了继承和模板编程技术 可以用来给类提供额外的功能 CRTP 概述 CRTP 的基本特征表现为 基类是一个模板类 派生类在继承该基类时 将派生类自身作为模板参数传递给基类 实现示例 tem
  • ACE命令参数解析

    ACE提供了ACE Get Opt类来处理命令行参数选项 这个类是一个迭代器 用于解析按照自然数方式计数的参数向量 它包装了POSIX的getotp 函数的功能 但是与getopt 函数不同 ACE Get Opt类的每个实例都维护有自己的
  • 【Vue】终极笔记:面试必胜宝典,大厂面试题源码级详解 (持续更新!!!)

    Vue经典面试题源码级详解 1 Vue组件之间通信方式有哪些 分析 思路分析 回答范例 1 组件通信常用方式有以下8种 2 根据组件之间关系讨论组件通信最为清晰有效 2 v if 和 v for哪个优先级更高 分析 思路分析 回答范例 3
  • mysql运行语句时出现 FUNCTION *** does not exist

    我在运行MYSQL时 经常出现这种问题 一阵搜索后 原来问题出现在函数与括号之间的空格上 比如 写成 concat 这样就出错了 需要去掉空格 concat 就好了 资料来源 在这个网址找到方法 http blog 152 org 2009
  • [Spring Boot]08 IDEA接入MyBatisCodeHelper代码自动生成器

    目录 前言 一 插件市场安装插件 二 使用插件自动生成代码 前言 上次介绍了 原生mybatis的方法 06 Spring Boot接入mybatis通用mapper插件自动生成器 这次 再介绍下插件MyBatisCodeHelper Pr
  • P4wnP1 USB与赛门铁克反病毒绕过

    最近 我使用P4wnP1 image把我手头的Raspberry Pi Zero W转换成了一个bad USB 我的最终目标是运行远程命令shell 同时绕过已启用完全保护的最新版Symantec SEP 我通过创建自己的有效负载paylo
  • QGis二次开发 -- 源码编译终极篇

    由于是开源软件 QGis版本迭代比较快 在保持long term release版本的基础上 每个月都会有一个monthly release的新版本发布 源码工程变化快速 给想要上手编译开发的新人朋友带来了一些困惑 我之前分别写过QGis1
  • pytorch crossentropy为nan

    pytorch crossentropy为nan 交叉熵损失函数的具体为 loss x ln z 1 x ln 1 z z softmax pred x 这样当z为0 0时会出现loss为nan的情况 本人的具体原因 网络中用了MultiH

随机推荐

  • nginx启动、关闭、重启及常用的命令

    转自 https blog csdn net veryisjava article details 72917894 nginx常用命令 启动 cd usr local nginx sbin nginx nginx服务启动后默认的进程号会放
  • Error creating bean with name ‘com.baomidou.mybatisplus.autoconfigure.MybatisPlusAutoConfiguration‘:

    报错图 原因分析 与MybatisPlusProperties的配置有关 该配置用于配置MyBatis Plus的全局设置 BindException表示在将mybatis plus global config db config前缀下的属
  • 凛冬已至 冰凌垂挂 岁末年初

    时光荏苒 岁月蹉跎 时间一分一秒从我们身边流过 岁月的脚步声也是越来越小 还没来得及跟眼前的2022挥手道别 2023已经出现在我们的眼前向我们问好 2023 就是新的一年 总会给我们带来无数的幻想和憧憬 虽然现在的我还没有一个真正的新年
  • QT基础学习(12)---事件过滤

    文章目录 事件过滤 一 事件过滤 实现该功能的方法就是在目标部件 自定义的图片显示部件 上注册事件过滤器 此时的事件过滤器就是我们所说的监视对象 完成这些步骤之后 当目标部件有事件产生后 首先会传递给监视对象 事件过滤器 进行处理而不是该事
  • 华为OD机试 - 猜字谜(Java)

    题目描述 小王设计了一个简单的猜字谜游戏 游戏的谜面是一个错误的单词 比如nesw 玩家需要猜出谜底库中正确的单词 猜中的要求如下 对于某个谜面和谜底单词 满足下面任一条件都表示猜中 变换顺序以后一样的 比如通过变换w和e的顺序 nwes
  • Kibana报错:Kibana server is not ready yet解决方法

    环境及版本 elasticsearch和kibana均为包安装的7 6 2 系统为unbutu22 04 1 部署完后访问kibana的web界面 出现kibana server is not ready yet 遇到这个问题后也是搜索了一
  • python注意事项

    python注意事项 1 缩进问题 每一个缩进都可能会导致有bug 因此要格外注意缩进 对齐 空格问题 尤其是循环体下的空格 一定要对齐 一般是缩进4格 2 标点符号的使用小结 逗号后面要有空格 冒号也是 等号前后都要有空格 3 字符串使用
  • MBA-day31 绝对值的几何意义

    绝对值的几何意义 1 x 2 x 4 由图可知 x 有 3 处取值区间 x gt 2 无最大值 x gt 4 无最大值 2 lt x lt 4 当x取值为 2和4时 存在几何意义中的最小值为 6 2 x 2 x 4 3 是否有根 由题1中
  • JAVAWEB编程题

    1 登陆验证代码
  • 人工智能大模型加速数据库存储模型发展 行列混合存储下的破局

    数据存储模型 专栏内容 postgresql内核源码分析 手写数据库toadb 并发编程 toadb开源库 个人主页 我的主页 座右铭 天行健 君子以自强不息 地势坤 君子以厚德载物 概述 在数据库的发展过程中 关系型数据库是一个里程碑式的
  • STL标准模板库学习笔记三(STL哈希容器)

    关联式容器 排序 的底层实现采用的树存储结构 更确切的说是红黑树结构 无序容器 哈希 的底层实现采用的是哈希表的存储结构 基于底层实现采用了不同的数据结构 因此和关联式容器相比 无序容器具有以下 2 个特点 无序容器内部存储的键值对是无序的
  • 欢迎访问阿里云Go Module代理仓库服务

    简介 go module公共代理仓库 代理并缓存go模块 你可以利用该代理来避免DNS污染导致的模块拉取缓慢或失败的问题 加速你的构建 地址 https mirrors aliyun com goproxy 使用帮助 1 使用go1 11以
  • leetcode刷题__删除有序数组中的重复项

    文章目录 题目描述 Java解决方法 题目描述 Java解决方法 class Solution public int removeDuplicates int nums int len nums length if len 0 return
  • Day81-爱心代码音乐版

    项目地址 截止到2023 9月有效 点击跳转 先看效果 素材来自网络 自己加了播放音乐的效果 直接上代码
  • 快速排序算法及其改进算法实现

    快速排序算法不稳定 快速排序算法在大多数的计算机上运行得都比其他排序算法快 而且排序算法消耗资源少 就平均时间而言快排是所有内部排序中最好的一个 对于已经排好的数组 最速排序有最坏时间复杂度为o n 2 当数组长度很小时 快排往往比其他排序
  • 【openGL2021版】链接FBX模型库

    openGL2021版 链接FBX模型库 大家好 我是Lampard猿奋 欢迎来到船新的openGL基础系列的博客 今天主要实现的是链接FBX模型第三方库 一 demo回顾 上周我已经实现了粒子系统 可以看到场景中已经存在着像萤火虫一样的闪
  • Wsl 开发环境配置

    Apt换源 切换清华源 sudo sed i s http archive ubuntu com https mirrors tuna tsinghua edu cn g etc apt sources list sudo sed i s
  • 图文详解 排序算法对比以及能解决的问题

    我们会使用的排序算法 总结源自 极客时间 王争老师 地址 https time geekbang org column intro 126 能看到所有的算法和数据结构的网站 https visualgo net en 这里是关于排序算法的链
  • 六大设计原则--开闭原则

    定义 software entities like classes modules and functions should be open for extension but closed for modifications 一个软件实体
  • php background,CSS BACKGROUND定位背景上下左右偏移

    css中我们经常使用background加载图片作为背景 这个背景图片可以通过具体属性的设置调整其上下左右偏移 调整背景图的上下左右偏移可以通过设置background属性或background position属性来实现 我们以div加背