5.css的常用背景属性

最新推荐文章于 2024-07-15 16:30:05 发布

堵车了

最新推荐文章于 2024-07-15 16:30:05 发布

阅读量125

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45660035/article/details/119572153

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.常用背景属性总结

背景样式	说明
background-color	设置背景颜色
background	设置背景颜色和透明度
background-image	设置背景图片
background-repeat	设置背景图片是否铺满，默认背景图片重复铺满整个容器，repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)
background-position	设置背景图片在容器中的位置
background-attachment	设置背景图片是滚动(scroll)还是固定(fixed)

2.代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test1</title>
  <style>
    div {
      margin: auto;
      width: 1000px;
      height: 1000px;
      border: 1px solid blue;
      /* 设置背景颜色，这个属性可以用下面的代替 */
      /* background-color: rgb(59, 28, 236); */
      /* 设置背景颜色和设半透明，最后一个参数是半透明设置，取值是0-1.0 */
      background: rgba(59, 28, 236, .4);
      background-image: url('test.png');
      /* 默认背景图片重复铺满整个容器，repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复) */
      background-repeat: no-repeat;
      /* 设置背景图片的位置，一个参数表示设置水平和垂直  ，两个参数第一个是水平，第二个是垂直 */
      background-position: center;
      /* 指定背景是滚动(scroll)还是固定(fixed) */
      /* background-attachment: scroll; */
    }
  </style>
</head>

<body>
  <div>
    这是一段测试用的文字
  </div>
</body>

</html>

堵车了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.css的常用背景属性

1.常用背景属性总结背景样式说明background-color设置背景颜色background设置背景颜色和透明度background-image设置背景图片background-repeat设置背景图片是否铺满，默认背景图片重复铺满整个容器，repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)background-position设置背景图片在容器中的位置background-attachment设置背景
复制链接

扫一扫