css background-position属性

news2024/11/24 16:25:46

定义

background-position 属性用于设置或获取元素背景图像相对于原点的初始位置。

background-position 基本语法

background-position:背景图片水平位置参数 背景图片垂直位置参数 ;

background-position 通常使用水平方向以及垂直方向的组合来定义背景图片呈现的位置。

属性值

在这里插入图片描述

可以通过分别设置 background-position-xbackground-position-y 来设置「靠左与靠上的距离」,如下:

<!DOCTYPE html>
<html>
<head>
<style>
   .container{
   	  width: 600px;
   	  height: 500px;
   	  background-color: #ddd;
   	  border: 1px solid #333;
   	  border-radius: 10px;
      background-image:url("cat.jpg");
      background-repeat:no-repeat;
      background-position-x:30px;
      background-position-y:0;
   }
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>

页面效果:
在这里插入图片描述

对齐方式

background-position:right bottom; // 靠右靠下对齐

background-position:30px 60px; //靠左 30px 靠上 60 px 的位置

background-position:10% 50%; // 靠左 10% 靠上 50% 的位置

background-position:10%; // 效果同上一行,靠左 10% 靠上 50% 的位置

水平垂直居中

设置图片水平垂直居中,如下:

<!DOCTYPE html>
<html>
<head>
<style>
   .container{
   	  width: 600px;
   	  height: 500px;
   	  background-color: #ddd;
   	  border: 1px solid #333;
   	  border-radius: 10px;
      background-image:url("cat.jpg"); //背景的图片路径或网址
      background-repeat:no-repeat; //背景图片不要重覆显示(仅显示一次)
      background-position:50% 50%;
   }
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>

页面效果:
在这里插入图片描述

background-repeat 属性

background-repeat 属性定义了图像的平铺模式,用于设置是否及如何重复背景图像。

基本语法:

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

  • repeat:默认值,背景图像将向垂直和水平方向重复。

  • repeat-x:只有水平位置会重复背景图像。

  • repeat-y:只有垂直位置会重复背景图像。

  • no-repeat:设置背景图片不会重复。

包含多张背景图片

还可以实现一个包含多个背景图像的框,如下:

<!DOCTYPE html>
<html>
<head>
<style>
   .container{
   	  width: 600px;
   	  height: 600px;
   	  background-color: #eee;
   	  border: 1px solid #333;
   	  border-radius: 10px;
      background-position: 
      top 0 left 0,
      top 0 right 0,
      bottom 20px left 80px,
      bottom 90px right 10px;
      background-image:url("78x78.png"),url("500x375.jpg"),url("300-300.jpeg"),url("350x350.png");
      background-repeat:no-repeat;
      background-size: 200px 200px;
   }
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>

页面效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

locust的安装和运行的demo

最近开始学习locust&#xff0c;从最初的安装到运行一个简单的demo。 lcoust官网上有介绍安装和使用&#xff1a;https://docs.locust.io/en/stable/installation.html locust 需要的python环境&#xff0c;首先要安装python。 因为本人已经安装了python以及python…

Spring Boot集成WebSocket Demo,简单明了

如果是初次搭建Spring BootWebSocket项目&#xff0c;不需要太复杂&#xff0c;只需要快速上手&#xff0c;那么你搜到的大部分文章可能都不适合你&#xff0c;我的这篇文章以最精简的方式搭建一个可以运行并通信的Spring BootWebSocket的Demo项目&#xff0c;有了根基之后再进…

记录部署ChatGLM大语言模型过程

1.什么是 ChatGLM&#xff1a; ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最低只需 6GB…

融合创新,着眼全局:泛工具行业增长如何顺势而为?

提到工具&#xff0c;你想到的是什么&#xff1f;办公场景中的扫描、传输、会议等工具&#xff0c;还是生活中帮你记录点滴、培养习惯的监督类APP&#xff0c;亦或者是消费支付买买买、旅游出行预订&#xff0c;甚至回家后的智能家居……工具类应用已经渗入我们工作生活的方方面…

数据结构与算法12:图、广度优先、深度优先

目录 【图】 【图的存储方法】 方法1&#xff1a;邻接矩阵 方法2&#xff1a;邻接链表 【图的算法】 广度优先搜索&#xff08;BFS&#xff09; 深度优先搜索&#xff08;DFS&#xff09; 【图】 在 数据结构与算法09&#xff1a;二叉树 这篇文章中讲述了“树”这种数…

RPC(远程过程调用)与消息队列介绍

文章目录 前言 一、过程调用分类 1.本地调用(Local Procedure Call,简称LPC) 2.远程调用(Remote Procedure Call&#xff0c;简称RPC) 二、API/SDK的区别是什么? 开发过程中,我们经常需要调用别人写的功能 三、WebClient 四、消息服务 目录 前言 一、过程调用分类 1.本…

excel转xmind

有如下excel&#xff0c;我们想把它转为xmind&#xff1b; 一、主流程 先说一下主要的流程&#xff1a; 需要把excel数据复制出来&#xff0c;放到文本编辑器&#xff08;如notepad&#xff09;中&#xff0c;比较乱哈&#xff0c;如下&#xff1a; 然后需要调整成如下格式…

JavaSE-04【方法】

JavaSE-04【方法】 第一章 方法 1.1 方法定义的格式详解 1、方法&#xff1a;就是若干语句的功能集合2、生活案例&#xff1a; 爆米花机&#xff1a; 原料&#xff1a;(玉米、糖) 产物&#xff1a;爆米花 3、方法中的两个重要名词 参数&#xff1a;即原料&#xff0c;就是进…

api接口汇总的平台

大麦网是一个在线购票平台&#xff0c;为音乐会、演唱会、话剧、体育比赛等各类娱乐活动提供门票销售服务。通过大麦网&#xff0c;用户可以轻松购买心仪的演出门票&#xff0c;并享受到良好的购票体验。 为了让更多用户了解到大麦网的商品详情&#xff0c;并能够方便地获取相…

网络协议 — IPv6 互联网协议第 6 版

目录 文章目录 目录IPv6IPv6 数据包格式固定报头扩展头部 IPv6 地址格式IPv6 网络的基本组成元素IPv6 的地址分类和寻址模式单播地址全球唯一地址&#xff08;Global Unique Address&#xff09;唯一本地地址&#xff08;Unique Local Unicast Address&#xff09;链路本地地址…

新手学习eclipse使用

目录 1 工具安装2 安装插件3 创建项目4 启动项目总结 对于新手程序员来说&#xff0c;选择一款趁手的工具还是有必要的。目前IDE比较好使用的是两块IDEA和eclipse&#xff0c;IDEA收费而且每年的费用不低&#xff0c;eclipse免费比较适合使用。 1 工具安装 下载地址&#xff1…

oracle-缩小表空间

刚准备收拾东西准备下班&#xff0c;突然接一个帮忙的事情&#xff0c;11g rac环境数据磁盘组使用率100%了&#xff0c;业务无法使用了&#xff0c;重新开电脑速战速决。 直接登录环境中&#xff0c;计划立刻释放一点点空间出来让业务恢复使用&#xff0c;业务恢复了再考虑增加…

100天精通Golang(基础入门篇)——第4天: Go语言中的变量与常量详解:声明、赋值和使用

&#x1f337; 博主 libin9iOak带您 Go to Golang Language.✨ &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &#x1f30a; 《I…

Shell脚本攻略:expect脚本免交互

目录 目录 一、理论 1.Here Document 2.expect实现免交互 二、实验 1.实验一 2.实验二 3.实验三 4.问题 一、理论 1.Here Document &#xff08;1&#xff09;概念 Here Document也被称为here-document/here-text/heredoc/hereis/here-string/here-script&#xff0c…

MYSQL的卸载、下载、安装、配置一步到位(超详细教程)

MYSQL的卸载、下载、安装、配置一步到位(超详细教程) 一、卸载 1.控制面板卸载 全部卸载 2.卸载数据文件 在安装的时候会有安装地址和数据库地址 找到自己安装数据库的地址&#xff0c;删除MySQL里面的内容 3.删除环境变量 此电脑–>属性–>高级系统设置–>环境变量…

爬虫代理IP池怎么来的,可能遇到哪些问题,怎么解决

目录 前言 一、代理IP对爬虫工作的重要性 二、代理IP池从哪里来 三、爬虫工作中可能会遇到哪些问题 四、怎么解决遇到的问题 总结 前言 爬虫工作离不开代理IP的支持&#xff0c;代理IP在爬虫工作中发挥重要的作用&#xff0c;但爬虫代理IP池从哪里来呢&#xff0c;爬虫工…

【MS1023 串化器和 MS1224 解串器--10MHz 到 80MHz、10:1 LVDS 并串转换器(串化器)/串并转换器(解串器)无标题】

MS1023 串化器和 MS1224 解串器是一对 10bit 并串 / 串并转 换芯片&#xff0c;用于在 LVDS 差分底板上传输和接收 10MHz 至 80MHz 的并行字速率的串行数据。起始 / 停止位加载后&#xff0c;转换为负载编 码输出&#xff0c;串行数据速率介于 120Mbps 至 960M…

网络安全真的没法入行吗?——网络安全自学笔记

前言 十多年前还是高中生的时候开始搞安全的&#xff0c;刚开始是看大佬们在群里发黑页觉得很牛逼。然后慢慢开始学&#xff0c;当时还在网上问过IP和ID有什么区别&#xff0c;&#xff0c;&#xff0c; 后来慢慢开始学注入&#xff0c;日到了第一个站&#xff0c;是家卖钢琴…

freeswitch透传带SDP的180

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 freeswitch对于180/183的消息处理有默认的规则&#xff0c;但是在3GPP的标准中&#xff0c;消息流程会更加复杂&#xff0c;场景更多变。 这样就需要我们根据实际环境中的场景定制消息流程。 本文只讨论带SDP的183/18…

用代码创造童话,永葆快乐时光

前言 随着科技的不断发展&#xff0c;大家对于世界的认知也越来越广泛和深入。在这个数字化时代&#xff0c;编程语言已经成为了一种全新的语言形式&#xff0c;创造了一个全新的世界&#xff0c;也为人们带来了无限的可能性。当然&#xff0c;这些可能性不止局限于商业领域和技…