背景颜色

图片

插入图片img

背景图片

背景图片
3. logo
4. 大图
5. 装饰性小图

便于控制位置！

插入后会执行自动平铺，这与插入图片是不同的！

div{width: 600px;height: 300px;background-image: url(img/登录用户头像.png); }

小结

盒子的第一件事，就是设置宽高和位置

背景图片的平铺可以设置（平铺即repeat也就是重复），有4个属性

背景颜色在图片下显示

背景位置 - PS对齐方式

比img设置位置要方便地多！

在一个盒子中，设置图片的位置

• 水平：left、right、center
• 垂直：top、bottom、center

注意：
我们设置的
background-color是背景颜色
background-image是背景图片
而后面的position和repeat是针对背景图片操作的，控制其平铺方式和位置

这些参数，控制的不是div盒子的位置，是控制盒子内的背景图片的位置。

对于position

• 一个参数：给一个，另外一个默认居中，如果给center，就是中心位置
• 两个参数：前后顺序不分，针对水平/垂直两个方向
  • 部分前后顺序，因为可以通过left识别是水平，top是垂直方向

div{/* 以下是操作盒子本身 *//* 给盒子大小 */width: 100%;height: 100px;/* 以下是操作盒子里面 *//* 给背景颜色 */background-color: #D2691E;/* 给背景图片 */background-image: url(img/登录用户头像.png);background-repeat: no-repeat; /* 只显示一个，不平铺 *//* 给定图片位置 *//* background-position: center bottom; */background-position: center;background-size: 50px;}

内外有别，注意是操作盒子，还是盒子里面的元素

广义的盒子：块级元素以及被赋予块级行为的行内元素，都可以作为一个个的盒子。

实例1 针对小图片

h3{/* box */width: 140px;height: 40px;/* text */font-size: 17px;line-height: 40px;font-weight: 400;text-indent: 1.5em;/* background */background-color: wheat;background-image: url(img/登录用户头像.png);background-repeat: no-repeat;background-size: 19px;background-position: left; }

重要的点：

知道自己在操作哪个元素，知道在哪个盒子里面操作

实例2 针对大图片 页面可能放不开内种

核心要点：自适应控制

div{width: 100%;height: 1100px;/* margin: 0; */background-image: url(img/wzry.jpg);background-repeat: no-repeat;background-position: top; }

控制超大图片，在任意浏览器都要，居中显示。

精确单位

对于bg-position我们需要统一下

• 参数有两个，x坐标 y坐标
• 参数可以是
  • 10px
  • left right top center
• 避免扯犊子的参数：20px left两个都设置x坐标……

不同的css参数，具备指定功能

例如font-size指定的就是文本，而background指定的就是背景，在同一个选择器可以一起写。

背景固定

背景色半透明

也允许.3。

仅影响盒子的背景色透明度，盒子内容不影响。

背景小结

注意，背景主要是两个方面

背景色

颜色

不透明度

背景图片：大图片，小图片，控制位置方便

其他各个属性，控制的都是背景图片，也就是块内的背景图片，不能控制文字什么的。

只要能有块行为，就可以使用这些，比如a标签转换为行内块元素，以及p标签……不止是div！

总结

以上是生活随笔为你收集整理的html css 学习笔记（1）背景相关的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。