CSS 设置背景图片

文章目录

    • 设置背景颜色
    • 设置背景图片
      • 背景图片偏移量计算原点
      • 背景图片尺寸
      • 设置背景图片位置
      • 设置背景图片重复方式
      • 设置背景范围
      • 设置背景图片是否跟随元素移动
      • 测试背景图片

本文概念部分参考:CSS背景background设置

设置背景颜色

  • background-color 设置背景颜色

设置背景图片

  • background-image 设置背景图片(背景图片将会盖在背景颜色上方)
    • 如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满(图片重复的超出元素的部分将会被裁剪掉)
    • 如果背景图片大小大于元素,则背景图片一部分会无法完全显示(图片多余的超出元素部分将会被裁剪掉)
    • 如果背景图片大小等于元素,则背景图片会直接正常显示
    • 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色

背景图片偏移量计算原点

  • background-origin 背景图片的偏移量计算的原点
    • border-box 背景图片的变量从边框处开始计算
    • padding-box 默认值,background-position从内边距处开始计算
    • content-box 背景图片的偏移量从内容区处计算

注意:经过测试,它是第一张图片的左上角到元素左上角的距离(第一张的意思是:在图片repeat铺满之前)。如果是border-box,那就是第一张图片的左上角到元素边框靠外面的哪那个左上角的距离。如果是padding-box,那就是到padding靠外面那个左上角的距离。如果是content-box,那就是到content左上角的距离。

背景图片尺寸

  • background-size 用来调整背景图像的尺寸大小。

    • 第一个值表示宽度,第二个值表示高度;如果只写一个,则第二个值默认是auto(即表示第二个值等比例缩放)
    • cover 图片的比例不变,将元素铺满
    • contain 图片比例不变,将图片在元素中完整显示
  • 补充:

background-size 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及
background-origin(图片的起始位置) 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。

如:background-size : contain | cover | 100px 100px | 50% 100%;

background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
background-size :100px 100px; // 调整图片到指定大小; background-size :50%
100%; // 调整图片到指定大小,百分比相对于"包含元素"的尺寸。

设置背景图片位置

  • background-position 设置背景图片的位置

    • 通过top-center-bottom,left-center-right这 几个表示方位的词来设置背景图片的位置:使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center
    • 通过偏移量来指定背景图片的位置:水平方向偏移量、垂直方向变量
  • background-position百分比原理

    • 等价写法

top left, left top 等价于 0% 0%.
top, top center, center top 等价于 50% 0%.
right top, top right 等价于 100% 0%.
left, left center, center left 等价于 0% 50%.
center, center center 等价于 50% 50%.
right, right center, center right 等价于 100% 50%.
bottom left, left bottom 等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom 等价于 100% 100%.

  • background-position百分比计算公式

background-postion:x y;
x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

如上通过设置百分比和关键字能实现背景图居中,如果要实现通过具体值来设置图片居中该设置多少?

根据上面公式:

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;
y=(容器的高度-背景图高度)*y百分比=(300px-200px)*50%=50px;

即设置background-postion:50px 50px;

效果同样居中。

设置背景图片重复方式

  • background-repeat 设置背景图片的重复方式
    • repeat 默认值,背景图片沿着 x 轴和 y 轴双方向重复
    • repeat-x 背景图片沿着 x 轴方向重复
    • repeat-y 背景图片沿着 y 轴方向重复
    • no-repeat 背景图片不重复

设置背景范围

  • background-clip 设置背景的范围(同时控制背景颜色和背景图片的裁剪)
    • border-box 默认值,背景会出现在边框的下边
    • padding-box 背景不会出现在边框,只出现在内容区和内边距
    • content-box 背景只会出现在内容区

设置背景图片是否跟随元素移动

  • background-attachment 背景图片是否跟随元素移动
    • scroll 默认值,背景图片会跟随元素移动
    • fixed 背景会固定在页面中,不会随元素移动

测试背景图片

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>设置背景图</title><style>/*去掉列表有序或者无序的徽记*/ul{list-style-type: none;}/*设置浮动,改变元素排列顺序*/li{/* 设置从左到右排列 */float: left;/* 每个列表向右偏移 */margin-right: 30px;/* 每个列表向下偏移 */margin-top:100px;}/*设置背景图*/body{background-image: url("./image/background.gif");/*设置背景图横向排列,不换行*/background-repeat: repeat-x;background-color:#cccc99;/*使用红绿蓝三种颜色可以测定颜色rgb(0~255,0~255,0~255)background-color: rgb(204,204,153);*/}label{display: block;margin-top: 100px;}input.myinput{border:solid 2px red;background-color: #ffd3d6;/* 设置波浪线背景图 */background-image: url("./image/check.gif");/* 只允许从左往右横向排列一次 */background-repeat: repeat-x;/* 设置背景图的位置 */background-position: bottom;}</style></head><body><ul><li><img src="image/1.jpg" alt="图片错误"></li><li><img src="image/2.jpg" alt="图片错误"></li><li><img src="image/3.jpg" alt="图片错误"></li><li><img src="image/4.jpg" alt="图片错误"></li></ul><label for="myinput">用户姓名: <input type="text" name="test" class="myinput"placeholder="请输入用户名" id="myinput"/></label></body>
</html>

效果

在这里插入图片描述

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

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

相关文章

当我们谈上下文切换时我们在谈些什么

相信不少小伙伴面试时&#xff0c;都被问到过这样一个问题&#xff1a;进程和线程的区别是什么&#xff1f;大学老师会告诉我们&#xff1a;进程是资源分配的基本单位&#xff0c;线程是调度的基本单位。说到调度&#xff0c;就不得不提到CPU的上下文切换了。 何为CPU上下文切换…

香港服务器托管:你对服务器托管了解多少?

在当今数字化的时代&#xff0c;服务器托管已成为企业和网站运营的关键一环。对于许多企业来说&#xff0c;如何选择一个安全、稳定、高效的服务器托管方案&#xff0c;成为了确保业务连续性和数据安全的重要课题。那么&#xff0c;究竟什么是服务器托管&#xff0c;它又有哪些…

使用WAF防御网络上的隐蔽威胁之扫描器

在网络安全领域&#xff0c;扫描器是用于侦察和识别网络系统漏洞的工具。 它们可以帮助网络管理员识别安全漏洞&#xff0c;也可能被攻击者用来寻找攻击目标。 扫描器的基本概念 定义&#xff1a;扫描器是一种自动化工具&#xff0c;用于探测网络和服务器中的漏洞、开放端口、…

手机崩溃日志的查找与分析

手机崩溃日志的查找与分析 摘要 本文介绍了一款名为克魔助手的iOS应用日志查看工具&#xff0c;该工具可以方便地查看iPhone设备上应用和系统运行时的实时日志和崩溃日志。同时还提供了崩溃日志的分析查看模块&#xff0c;可以对苹果崩溃日志进行符号化、格式化和分析&#x…

统计学R语言 实验3 点估计

统计学R语言 实验3 点估计 一、实验目的 1. 掌握理解点估计的相关概念和方法。 2. 掌握理解点估计的估计质量好坏判断方法。 3. 熟悉R语言等语言的集成开发环境。 二、实验分析与内容 某灯泡厂从某日生产的一批灯泡中抽取10个灯泡进行寿命试验&#xff0c;得到灯泡寿命&…

leetocode 15 三数之和

题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例…

Linux网络引导自动安装centos7

目录 一、部署PXE远程安装服务 1. 系统装机的三种引导方式 2. pxe概述 3. 实现过程 4. 搭建过程中服务介绍 4.1 TFTP服务 4.2 vsftp&#xff1a;安装系统镜像文件获取方式 4.3 syslinux 4.4 DHCP服务 5. 操作过程 二、实现Kickstart无人值守安装 1. 安装Kickstart图…

计算机三级(网络技术)——应用题

第一题 61.输出端口S0 &#xff08;直接连接&#xff09; RG的输出端口S0与RE的S1接口直接相连构成一个互联网段 对172.0.147.194和172.0.147.193 进行聚合 前三段相同&#xff0c;将第四段分别转换成二进制 11000001 11000010 前6位相同&#xff0c;加上前面三段 共30…

AI图片物体移除器:高效、便捷的AI照片物体擦除工具

在我们的日常生活中&#xff0c;照片是一种重要的记录和表达方式。然而&#xff0c;有时候我们会遇到需要将照片中的某些物体和元素去除的情况。这时候&#xff0c;传统的图像处理软件可能过于复杂&#xff0c;让人望而却步。为了解决这个问题&#xff0c;AI图片物体移除器的软…

运筹说 第104期 | 2023全球高被引科学家名单发布!

2023年11月15日&#xff0c;全球领先的专业信息服务提供商科睿唯安发布2023年度“全球高被引科学家”名单&#xff0c;遴选全球高校、研究机构和商业组织中对所在研究领域具有重大和广泛影响的顶尖科学人才。最终&#xff0c;来自全球67个国家和地区1300多个机构的6849名科学家…

Node cool 跨域问题的解决

1.问题 自己在写后端接口的时候 发现一个接口在抖音小程序上可以调用 浏览器上也可以直接打开 但是在H5 的请求中 一直就是cors error 前端报这个跨域问题 在后端 报not Found 一开始以为是找不到 经过确定 发现是跨域问题 2.解决 在全局 configuration.ts 文件里有个全局…

申请开启|成为亚马逊云科技 Community Builder,共建云端社区!

在探索由技术打造的云端世界时&#xff0c;和同行者一起学习&#xff0c;与技术专家共同探讨是开发者成长的最佳助力&#xff01; 亚马逊云科技开发者社区 Community Builders 为技术爱好者和新兴思想领袖提供技术资源、学习和交流机会&#xff0c;帮助开发者探索、分享技术相关…

详解SpringCloud微服务技术栈:Gateway网关(断言、过滤器、跨域问题)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;Feign远程调用、最佳实践、错误排查 &#x1f4da;订阅专栏&#xff1a;微服务技术全家…

PuTTY的ppk密钥与OpenSSH密钥之间的相互转换

几个概念说明&#xff1a;id_rsa、id_rsa.pub、ppk、pem 目前有两个主流的密钥格式&#xff1a;OpenSSH格式的密钥 和 PuTTY格式的密钥。 id_rsa和id_rsa.pub 都是OpenSSH格式的密钥。 id_rsa是OpenSSH格式的SSH私钥。 id_rsa.pub是OpenSSH格式的SSH公钥。ppk文件 ppk文件是P…

c++基础2

一、c的引用 引用和指针的的区别&#xff1f; 引用是一种更安全的指针&#xff1a; 1. 引用必须初始化&#xff0c;指针可以不用初始化 int a 10; int *p; // 指针可能是野指针 int &b a;//引用赋值"&#xff0c;通常指的是直接修改引用所引用的对象的值&#xff0…

Qt/QML编程之路:小键盘keyboard(36)

小键盘对于qml应用是经常用到的,在qml里面,就如一个fileDialog也要自己画一样,小键盘keyboard也是要自己画的,对于相应的每个按键的clicked都要一一实现的。 这里有一个示例: 代码如下: import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Window 2.0 im…

yum仓库以及NFS共享

yum实现过程 1.光驱里自带yum 2.网络下载到本地 3.直接通过网络 如何实现安装服务 yum客户端找到yum服务端&#xff0c;找到yum的仓库位置&#xff0c;下载元信息&#xff0c;因为里面有软件的位置&#xff0c;因此可以找到软件包的位置&#xff0c;然后下载到本地 仓库的类…

25考研英语复习计划

Hello各位小伙伴大家好&#xff0c;今天要给大家分享的是英语备考计划&#xff0c;大家可以作为参考&#xff0c;制定适合自己的备考计划。 【英一/二】 英语分为英一、英二&#xff0c;一般学硕英一&#xff0c;专硕英二。 英一要比英二难度大。 【复习计划】 1-2月&#xf…

图深度网络浅层理解

图神经网络 1.输入&#xff1a; 图网络 2.输出&#xff1a; 节点类别、某两个节点的新连接、产生新的图或子图 3.端到端表示学习&#xff08;Representation Learning&#xff09;/图嵌入&#xff1a; 将节点映射为d维的向量&#xff0c;d维向量就包含了这个节点的连接关系…