关于background背景和img图片

我的CSS苦逼学习日记（2）

img的相关内容：

因为img是行内替换元素，可以直接设置高度和宽度等。但是不会独占一行

---

若直接使用img不给任何修饰，则是显示图片的原本大小

 img {
            width: 60px;
            height: 50px;
        }

上图所示则是设计img的宽和高分别为60px和50px

img {
            width: 100%;
            height: 50%;
        }

上图所示则是设计img的长和宽分别占父级盒子宽和高的100%和50%

---

background的相关内容

background有：

1.background-color
2.background-images
3.background-style
4.background-position
等内容

background-color：
用来设置背景颜色

background-images：
用来设置背景图片，使用方法：
url()，url括号中的内容填写背景图片的相对路径
使用背景图片的好处：不占有位置，可以文字在图片之上显示，更加有美感。

background-style：
默认的状态是repeat，大致意思是若一个盒子为300×300px大小，而图片只有100×100px的图片，则会在盒子全方位内重复显示这个盒子，
repeat-y是只在y方向上重复显示，
repeat-x是只在x方向上重复显示，
no-repeat是图片不重复显示

background-position：
可以用来设置使用图片的哪个一个部分，这也是精灵图的使用原理，将许多小图标放在一个大图片上面，通过移动x，y坐标而显示大图片的指定区域，x，y可以为负值，y向下为正，x向右为正

---

设置背景颜色为透明色：
使用

div {
            width: 300px;
            height: 300px;
            background-color: rgba(0,0,0,.3);
        }

这种形式，其中 .3为0.3的缩写，它的值可以为0~1，数值越大，则透明度越低，1为不透明，0为完全透明。