【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
CSS 设置 位置 背景
2023-09-14 09:07:26 时间
一、背景位置
1、语法说明
如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角 ;
设置背景位置的 CSS 语法如下 :
background-position : length length
background-position : position position
background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ;
- length 长度 :
- 百分数 : 如 50% ;
- 浮点数 + 单位 : 如 : 150.5px ;
- position 方位 : 设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;
- 左上右下 : top , bottom , left , right ;
- 中间 : center
2、注意事项
background-position 属性值使用注意事项 :
- 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ;
- 方位设置 : 如果设置 position 方位属性值 , 设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;
- 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关 , left top 与 top left 效果相同 , 都是左上角 ;
- 设置一个值 : 如果 只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 :
- 设置了 left , 则垂直方向居中对齐 ;
- 设置了 top , 则水平方向居中对齐 ;
- 坐标设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ;
- 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置 ;
- 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标 ;
二、背景位置-方位值设置
1、效果展示
效果展示 :
- 设置背景位置为 右上角 : 粉色区域是盒子的区域 , 图片背景位于盒子右上角 ;
/* 设置背景位置 - 右上角 */
background-position: right top;
- 设置背景位置为 左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ;
/* 设置背景位置 - 左下角 */
background-position: left bottom;
- 设置背景位置为 左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; 设置 bottom left 和 left bottom 效果是一样的 ;
/* 设置背景位置 - 左下角 */
background-position: bottom left;
- 设置背景位置为 水平居中 垂直居中 : 粉色区域是盒子的区域 , 图片背景位于盒子中心位置 ;
/* 设置背景位置 - 水平居中 垂直居中 */
background-position: center center;
- 设置背景位置 指定一个值 另一个默认居中 : 粉色区域是盒子的区域 , 图片背景位于盒子的位置为 垂直方向位于顶部 , 水平方向居中 ;
/* 设置背景位置 - 指定一个值 另一个默认居中 */
background-position: top;
2、完整代码示例
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>背景图片位置</title>
<base target="_blank"/>
<style>
/* 设置背景图片 */
.background {
width: 400px;
height: 400px;
color: black;
background-color:pink;
/* 背景图片设置
1. 在 url() 中设置相对链接
2. url() 中的链接没有双引号
*/
background-image: url(images/image.jpg);
/* 默认平铺样式 repeat */
/*background-repeat: repeat;*/
/* 不平铺 */
background-repeat: no-repeat;
/* x 轴平铺 */
/*background-repeat: repeat-x;*/
/* y 轴平铺 */
/*background-repeat: repeat-y;*/
/* 设置背景位置 - 右上角 */
/*background-position: right top;*/
/* 设置背景位置 - 左下角 */
/*background-position: left bottom;*/
/* 设置背景位置 - 水平居中 垂直居中 */
/*background-position: center center;*/
/* 设置背景位置 - 左下角 两个值前后顺序无关 */
/*background-position: bottom left; */
/* 设置背景位置 - 指定一个值 另一个默认居中 */
/*background-position: top;*/
}
</style>
</head>
<body>
<div class="background">
背景图片测试
</div>
</body>
</html>
相关文章
- html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]
- 滚动效果——marquee的html样式和CSS属性
- rem+css预处理+媒体查询与rem+flexible.js做网页适配
- css的flex布局
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- css设置横向滚动条样式_js设置滚动条样式
- css+js 实现一行多个盒子块元素响应式布局
- 【说站】css中Grid模块是什么
- 【说站】css背景中有哪些方法
- 【说站】css中skew函数的使用
- 完整html网页代码_css长度单位
- CSS媒体查询_css网页
- 从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
- CSS 渐变背景过渡的2种方式
- 前端必备的 CSS 库,normalize.css
- 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 )
- 【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
- 【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )
- 【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )
- 为什么你永远不应该在CSS中使用px来设置字体大小
- 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
- 纯CSS根据图片取色设置背景色
- 【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0; | 代码示例 )
- HTML&CSS精选笔记_浮动与定位详解编程语言
- 纯CSS + 媒体查询实现网页导航特效详解编程语言
- 史上最强大的40多个纯CSS绘制的图形详解编程语言
- 采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
- CSS选择符说明
- 推荐深入理解css中的position定位和z-index属性
- 用javascript和css模拟select的脚本
- css设置字间距
- IE和FireFox(FF)中js和css的不同
- 通过javascript设置css属性的代码
- javascript与CSS复习(三)
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存
- jQuery的显示和隐藏方法与css隐藏的样式对比
- php实现压缩多个CSS与JS文件的方法