首页 前端知识 CSS-background属性【看这一篇就够了!!!】

CSS-background属性【看这一篇就够了!!!】

2024-09-04 23:09:06 前端知识 前端哥 168 243 我要收藏

目录

background背景属性

background-color 背景颜色

background-image

background-repeat 重复

backgroun-position 背景图片位置

background 复合属性

background-attachment 背景固定

scroll值

fixed值

local值

background-size 背景尺寸

数值表示法:

contain和cover表示

background-clip

background-origin

background背景属性

background-color 背景颜色

  • background-color 表示背景颜色
  • 背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示
  • padding区域是有背景颜色的
<style>
  .box {
    width: 100px;
    height: 100px;
    padding: 20px;
    /* background-color: orange; */
    /* 背景颜色及透明度 0.5 */
    background-color: rgba(245, 100, 4, 0.5);
  }
</style>
<body>
  <div class="box">1</div>
</body>

效果:

background-image

  • background-iamge 属性用来设置背景图片
  • 图片路径要写在url()圆括号中,可以使绝对路径/相对路径
.box {
  width: 500px;
  height: 400px;
  border: 50px solid black;
  background-color: yellow;
  background-image: url(../images/test.png);
}

background-repeat 重复

用来设置背景图片的重复模式

在默认情况下,背景是在x轴y轴方向进行平铺。

background-repeat属性值

描述
repeat;x、y均平铺(默认)
repeat-x;x平铺
repat-y;y平铺
no-repeat;不平铺

<style>
  div {
    /* 宽度 */
    width: 200px;
    /* 高度 */
    height: 200px;
    /* 边框线 */
    border: 2px solid red;
    /* 背景图 */
    background-image: url(./images/bg48.png);
    /* 左外边距 */
    margin-left: 20px;
    /* 左浮动 */
    float: left;
  }
  .box1 {
    /* 不平铺 */
    background-repeat: no-repeat;
  }
  .box2 {
    /* y轴平铺 */
    background-repeat: repeat-y;
  }
  .box3 {
    /* x轴平铺 */
    background-repeat: repeat-x;
  }
  .box4 {
    /* x 和 y 轴平铺 */
    background-repeat: repeat;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

效果:

backgroun-position 背景图片位置

  • 用来控制背景图片在盒子中显示的开始位置
  • 背景图片位置默认是从padding区开始计算

 语法:

/* x与盒子左边距离  Y与盒子上边距离 */
background-position: x y;
/* 百分比写法x% y% */
/* 左偏移量 = (容器width + 左右padding - 背景图片width) * 百分比 */
/* 右偏移量 = (容器height + 上下padding - 背景图片height) * 百分比 */
background-position: x% y%;
/* 单个值写法时 图片在垂直方向自动居中 */
background-position: 10%;
  • 可以用(top、bottom)、(center)、(left、right)三组中的任意两个组中的一个值来确定位置
  • 也可以使用以上三组中某个一个词来确定位置
单一关键字等价的组合关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left
<style>
  div {
    width: 110px;
    height: 100px;
    /* 内边距 */
    padding: 10px;
    border: 2px solid red;
    /* 浮动 */
    float: left;
    /* 左外边距 */
    margin-right: 10px;
    /* 文本水平居中 */
    text-align: center;
    /* 文本垂直居中 */
    line-height: 100px;
    /* 文字颜色 */
    color: red;
    /* 背景图片 */
    background-image: url(images/bg.png);
    /* 背景不重复 */
    background-repeat: no-repeat;
  }
  /* 左上角 */
  .box1 {
    background-position: left top;
  }
  /* 左中间 */
  .box2 {
    background-position: left center;
    line-height: 20px;
  }
  /* 左下角 */
  .box3 {
    background-position: left bottom;
  }
  /* 右上角 */
  .box4 {
    background-position: right top;
  }
  /* 右中间 */
  .box5 {
    background-position: right center;
    line-height: 20px;
  }
  /* 左下角 */
  .box6 {
    background-position: right bottom;
  }
  /* 上中间 */
  .box7 {
    background-position: top center;
  }
  /* 水平垂居中 */
  .box8 {
    background-position: center center;
    line-height: 20px;
  }
  /* 水平垂居中 */
  .box9 {
    background-position: center;
    line-height: 20px;
  }
</style>
<body>
  <div class="box1">left top</div>
  <div class="box2">left center</div>
  <div class="box3">left bottom</div>
  <div class="box4">right top</div>
  <div class="box5">right center</div>
  <div class="box6">right bottom</div>
  <div class="box7">top center</div>
  <div class="box8">center center</div>
  <div class="box9">center</div>
</body>

效果:

background 复合属性

  • 常用的背景相关小属性,可以合写到一条background属性中
  • background是:“background-color”、”backgroud-image“、”background-repeat“、”background-position“的简写
  • 工作中用的非常多
  • 如果后面的值省略未写,会以默认值代替

background-attachment 背景固定

决定背景图像的位置是在“视口”内固定,或者随着它的区块滚动

属性值描述
scroll默认值。背景图片随着页面的滚动而滚动,相对于元素本身固定,而不是随着它的内容滚动
fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动
local背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,同时背景图图片随着页面的滚动而滚动

scroll值

背景图片随着页面的滚动而滚动,但相对于元素本身固定,而不是随着它的内容滚动

<style>
	body {
	  height: 2000px;
	}
	.box {
	  width: 1000px;
	  height: 1000px;
	  background: url("/static/jjy.png") no-repeat;
	  /* scroll为默认值,不加值也是scroll,所以加和不加效果一样 */
	  background-attachment: scroll;
	  /* 超出内容部分自动出现滚动条 */
	  overflow-y: auto;
	}
	.box1 {
		background-color: pink;
		height: 1500px;
		width: 80px;
	}
  </style>
  <body>
	<div class="box">
		<div class="box1">1-2-3-4-5-6-7-8-9</div>
	</div>
  </body>

效果:

fixed值

  • 此属性值表示背景“相对于视口固定
  • 无论移动什么滚动条,图片都不会移动
  • (下面例子中的图片移动,其实是图片的元素div被移动到上方,造成视觉上的移动)
<style>
	body {
	  height: 2000px;
	}
	.box {
	  width: 400px;
	  height: 400px;
	  background: url("/static/jjy.png") no-repeat;
	  /* 背景图相对视口固定,拖动浏览器滚动条和元素自身滚动条,背景图都固定,不会随着内容滚动 */
	  background-attachment: fixed;
	  /* 超出内容部分自动出现滚动条 */
	  overflow-y: auto;
	}
	.box1 {
		background-color: pink;
		height: 600px;
		width: 80px;
	}
  </style>
  <body>
	<div class="box">
		<div class="box1">1-2-3-4-5-6-7-8-9</div>
	</div>
  </body>

效果:

local值

  • 如果一个元素拥有滚动机制,背景将会随着元素的内容滚动
<style>
	body {
	  height: 2000px;
	}
	.box {
	  width: 400px;
	  height: 400px;
	  background: url("/static/jjy.png") no-repeat;
	  /* 背景图相对视口固定,拖动浏览器滚动条,背景图固定,不会随着内容滚动 */
	  background-attachment: local;
	  /* 超出内容部分自动出现滚动条 */
	  overflow-y: auto;
	}
	.box1 {
		background-color: pink;
		height: 600px;
		width: 80px;
	}
  </style>
  <body>
	<div class="box">
		<div class="box1">1-2-3-4-5-6-7-8-9</div>
	</div>
  </body>

效果:

background-size 背景尺寸

属性值说明实例
x yx y 数值,分别表示背景图片宽高大小background-size: 100px 200px;
x% y%百分比是相对于盒子的宽高而言,background-size: 50% 20%;
x autoauto 是相对于第一个值宽来自动缩放
第一个值可以是数值,也可以是百分形式
background-size: 100px auto;
contain背景图片智能改变尺寸以容纳到盒子里background-size: contain;
cover背景图片智能改变尺寸以撑满盒子background-size: cover

数值表示法:

<style>
  div {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-image: url(images/bg48.png);
    background-repeat: no-repeat;
  }
  .box1 {
    background-size: 100px 200px;
  }
  .box2 {
    background-size: 50% 20%;
  }
  .box3 {
    background-size: 50% auto;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

效果:

contain和cover表示

由下面的例子可以看出,我们推荐使用“cover”,系统会智能同比例扩大/缩小图片以充满整个盒子

<style>
    div{
        width:200px;
        height:200px;
        border:2px solid red;
        background-image: url(images/yw.png);
        background-repeat: no-repeat;
        float: left;
        margin-right: 10px;
    }

    .box2{
        background-size: contain;
    }
    .box3{
        background-size: cover;
    }

</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

效果:

background-clip

background-clip设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面

说明
border-box默认值。背景绘制在边框方框内。
padding-box背景绘制在内边距方框内。
content-box背景绘制在内容方框内。
text背景被裁剪成文字的前景色。
<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    border: 50px solid rgba(244, 155, 155, 0.5);
    padding: 50px;
    background-image: url(images/fish.png);
    background-color: aquamarine;
    float: left;
    margin-right: 10px;
  }
  .box1 {
    background-clip: border-box;
  }
  .box2 {
    background-clip: padding-box;
  }
  .box3 {
    background-clip: content-box;
  }
  .box4 {
    float: left;
    width: 200px;
    height: 200px;
    font-size: 50px;
    background-image: linear-gradient(to right, red, blue, yellow);
    /* 背景被裁剪成文字的前景色 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 文字颜色一定要设置为透明,才能看到效果 */
    color: rgba(0, 0, 0, 0.2);
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box4">一条小鱼</div>
</body>

效果:

background-origin

背景图片的定位区域

描述
padding-box背景图片的摆放以 padding 区域为参考 默认值
border-box背景图片的摆放以 border 区域为参考
content-box背景图片的摆放以 content 区域为参考
<style type="text/css">
  div {
    width: 100px;
    height: 100px;
    border: 50px solid rgba(0, 0, 0, 0.5);
    padding: 50px;
    background-image: url(images/bg16.png);
    background-color: aquamarine;
    float: left;
    margin-right: 10px;
    background-repeat: no-repeat;
  }
  .box1 {
    /* 背景图片的摆放以 padding 区域为参考  默认值 ; */
    background-origin: padding-box;
  }
  .box2 {
    /* 背景图片的摆放以 border 区域为参考 */
    background-origin: border-box;
  }
  .box3 {
    /* 背景图片的摆放以 content 区域为参考 */
    background-origin: content-box;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

效果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17616.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!