CSS3-给网页添加图片

时间:2023-03-09 15:34:35
CSS3-给网页添加图片

给网页添加图片:

1、background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上

2、background-size不支持IE8

background-size: width height;

background-size: contain;/*迫使图片进行尺寸调整,保持图片的长宽比*/

background-size: cover;/*宽高调整,适应元素,所以经常变形*/

background-size: 100% auto;

3、background-color: yellow;background: url(img.aaaaa.png) no-repeat;与

background: url(img.aaaaa.png) no-repeat; background-color: yellow;是有区别的,在第一中方法中,先设置背景色为黄色,但再执行background的时候,会自动设置默认值为透明,所以背景图片颜色会覆盖黄色

4、在使用背景图片的时候尽量使用css属性background,因为很多其他背景图片的css属性IE8都不支持

5、线性渐变:

background-image: linear-gradient(left,#900 20%,#fc0 30%,#fc0 70%,#900 80%);

/*对于第一种颜色以及最后一种颜色,它是不需要定位,但如果有一个值则表示一种持续状态其余的是告诉浏览器子什么位置上的时候需要进行改变颜色*/

谷歌并不支持这属性,需要加前缀-webkit-

IE9及其之前的版本也都不支持渐变,需要先设置一个背景色

线性重复渐变:background-image: -webkit-repeating-linear-gradient(45deg,#900 0,#900 10px,#fc0 10px,#fc0 20px)

6、径向渐变: (椭圆或者圆形方式渐变)

background-image: -webkit-radias-gradient(20% 40%,circle,red,blue);

/*渐变方向从元素左边20%以及元素上方40%处开始*/

(20% 40%,circle closest-side,red,blue)

/*closest-side从中心点开始一直延续到离中心点最近的那一边,半径也就是中心点到这条边的长度,椭圆则两条边上下以及左右*/

/*closest-corner到最近元素角的距离*/

/*farther-side到最远一边的距离*/

/*farther-Corner到最远角的距离*/

7、如果图片并排排列的时候,如果图片的高度是参差不齐的,则需要使用表格