程序地带

html css 学习笔记(1)背景相关


背景颜色

在这里插入图片描述


图片
插入图片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坐标参数可以是
10pxleft right top center 避免扯犊子的参数:20px left两个都设置x坐标……
不同的css参数,具备指定功能

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


背景固定

在这里插入图片描述在这里插入图片描述


在这里插入图片描述


背景色半透明

在这里插入图片描述在这里插入图片描述 也允许.3。


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


背景小结

在这里插入图片描述 注意,背景主要是两个方面


背景色
颜色不透明度 背景图片:大图片,小图片,控制位置方便
其他各个属性,控制的都是背景图片,也就是块内的背景图片,不能控制文字什么的。 只要能有块行为,就可以使用这些,比如a标签转换为行内块元素,以及p标签……不止是div!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42929607/article/details/111246354

随机推荐

选中回填 高德_襄阳机械钻井哪家好,桩基施工

襄阳机械钻井哪家好枣阳市高德机械工程队在打桩、打井、钻井、等方面有丰富的操作经验,为襄阳及周边城市提供一体化的打桩打井服务。我们拥有各种型号打桩机、打井机、旋挖机、锚杆机数台、二十多人专...

Mather King 阅读(885)

行业短信 运营思路_游戏行业短信平台解决方案

一、行业对象手机游戏公司、网络游戏公司、单机游戏公司、游戏营销公司、游戏平台、游戏推广网站等。二、行业分析中国电子游戏行业凭借着电脑和智能手机的普及,保持了多年的高速增长的势头ÿ...

weixin_39922151 阅读(545)

395 至少有K个重复字符的最长子串(递归)

1.问题描述:找到给定字符串(由小写字符组成)中的最长子串 T , 要求 T 中的每一字符出现次数都不少于 k 。输出 T 的长度。示例1:输入...

smalllxp 阅读(536)

ES6(ECMAScript 6) 数组新功能

ES6数组新功能1、for...of循环迭代2、ֵ使用@@iterator对象3、数组的entries、keys、values方法4、from方法5、使用of方法6、使用fill方法7...

陈柴Rarin 阅读(199)