0
点赞
收藏
分享

微信扫一扫

CSS的背景属性和链接伪类选择器

zhyuzh3d 2022-03-26 阅读 65

1.背景属性

通过 CSS 背景属性,可以给页面元素添加背景样式,包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。

1.1 背景颜色

background-color 属性定义了元素的背景颜色。

一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。

背景颜色 ,一样可以使用三种方式——分别为具体的英文颜色/十六进制/rgb形式*

1.2 背景图片

background-image 属性表示元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景) 

背景图片属性有两个属性值,默认为无背景图none;      属性值url(),括号里面为背景图片的地址.

1.3 背景平铺

 background-repeat 属性表示在 HTML 页面上对背景图像进行平铺。

属性值 repeat表示背景图片沿水平和垂直两个方向分别平铺,为默认值

②属性值no-repeat表示背景图片不平铺,只显示一次

③属性值repeat-x表示背景图片只沿水平方向平铺;

④属性值repeat-y表示背景图片只沿垂直方向平铺;

1.4 背景图片位置 

background-position 属性可以改变图片在背景中的位置

① background-position: x y;中的x表示水平位置,y表示垂直位置,   默认为x和y均为0;越向右向下,x和y的值越大

②如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中 。

③可以使用百分比表示背景图片的位置,  相对于盒子的宽度高度来说的,比如这里的30%指的就是这个背景图片所处盒子的30%。

④可以使用方位词表示背景的位置 ,如: right、left、center、top、bottom ;

⑤如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐;

x轴的位置属性和 y轴的位置属性 也可以分开写。 

1.5 背景图像固定(背景附着) 

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 

①属性值scroll表示背景图像是随对象内容滚动的;

②属性值fixed表示背景图像固定

1.6 背景图像缩放

background-size 属性k可以设置背景图像的大小。 这个属性是CSS3特有的,之前的版本不具有.

①属性值为: 长度|百分比|cover|contain;

②属性值设置成百分比时  这个百分比是相对于盒子而言的,比如background-size: 60%   60%;则表示这个背景图片占这个盒子宽度的60%,高度的60%;

③若background-size只指定一个精确值,那么这个值指的是宽度,高度省略了,则表示为等比例缩放;比如background-size: 60%; 其实等价于 background-size: 60% auto;

④属性值cover,表示把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,实行的是等比例缩放,可能有部分背景图片显示不全

⑤属性值contain, 表示把当宽度或高度,有一者铺满盒子时就不再进行拉伸了,实行的是等比例缩放,可能有部分空白区域

2.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

2.1 链接伪类选择器的语法

2.2 注意点:

① 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。 

②记忆法:love hate 或者 lv 包包 hao 。 

③因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

举报

相关推荐

0 条评论