css的背景讲解

最新推荐文章于 2024-07-14 12:31:08 发布

cp02

最新推荐文章于 2024-07-14 12:31:08 发布

阅读量232

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/m0_49315169/article/details/115208024

版权

css背景的介绍

  background--背景
  css背景属性是css的一个属性，可以给页面元素添加背景样式
  背景属性可以设置背景的颜色，图片，平铺，位置等

1.背景颜色–background-color
background-color属性定义了元素的背景颜色
语法： background-color：颜色值
注意：如果你没有设置背景的颜色，系统会默认给你一个透明背景。

示例：

<style>
.box{
   width:100px;
   height:100px;
   background-color：red;
}
</style>
<body>
<div class="box"></div>
</body>

效果如图所示
在这里插入图片描述

2.背景图片-- background-image
background-image属性描述了元素的背景图像，优点是非常便于控制位置。
语法：background-image：none| url （url）
none：无背景图（默认的）
url：使用绝对或相对地址指定背景图像
中间的|表‘或’的意思，第一个url必写，第二个才是指定。

示例：

div{
   width:280px;
   height:120px;
   background-image: url(p1.jpg);
}
<body>
<div></div>
</body>

效果如图：
在这里插入图片描述

3.背景平铺–background-repeat
background-repeat属性可以对背景图像进行平铺。
语法：background-repeat：repeat（纵向，横向平铺）|no-repeat（不平铺）|repeat-x（横向平铺）|repeat-y（纵向平铺）
对比2中的图是平铺的
则不平铺的图

示例：

div{
   width:1000px;
   height:800px;
   background-image: url(p1.jpg);
  background-repeat：repeat；
}
<div></div>

如图所示
在这里插入图片描述

4.背景图像位置-- background-position
background-position属性可以改变图片在背景中的位置
语法：background-position：x y；
x坐标与y坐标，可以使用方位名词或精确定位

示例：

div{
   width:1000px;
   height:600px;
	border: 2px solid hsla(0,0%,0%,1.00);//边框的设置
   background-image: url(p1.jpg);
   background-repeat:no-repeat;
   background-position: top center;
}
<div></div>

如图所示：
在这里插入图片描述

总结与补充：在这里插入图片描述

cp02

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css的背景讲解

css背景的介绍 background--背景 css背景属性是css的一个属性，可以给页面元素添加背景样式背景属性可以设置背景的颜色，图片，平铺，位置等1.背景颜色–background-colorbackground-color属性定义了元素的背景颜色语法： background-color：颜色值注意：如果你没有设置背景的颜色，系统会默认给你一个透明背景。示例：<style>.box{ width:100px; height:100px;
复制链接

扫一扫