首页 > 编程知识 正文

如何在css中设置图片的属性,css3让背景图片一直旋转

时间:2023-05-06 18:59:23 阅读:37358 作者:3313

添加背景属性

背景剪辑

背景定向

背景大小

CSS的一般背景属性

背景重复

背景图像

边框样式

边框-半径

边框图像

新背景属性:

背景剪辑

指定显示背景的范围

属性值:

边框:边框中的背景。 包括边框(默认)

填充- box :填充以内的背景,包括填充

内容- box :内容内的背景。 包括内容

背景- origin :

开始显示的位置一般在以图像为背景时使用

属性值:

边框:从边框显示

填充盒:从填充中显示

内容盒:从内容中显示

背景大小:

设置背景图像的宽度和高度

属性值:

自动:保持原始高度和宽度

length:后面可以有两个数字:宽度和高度。 只写一个数值,就会高度适应

percentage :后跟两个数字:宽度和高度(百分比)。 只写一个数值,就会高度适应

cover :放大到满满的容器,适合比容器小的照片

contain :适合缩小到满容器、大于容器的图像

后台位置

属性设置背景图像的开始位置。

背景定位:中心;

CSS常规背景属性:

背景重复:

图像重复

背景图像:

一个元素可以有一个或多个背景图像

写法:

背景影像3360 URL (“123.jpg”)、URL (“124.jpg”)、URL (“125.jpg”);

添加多个图像时重叠,第一张从特别的上往下依次

边框样式:

边框-半径

属性介绍:

后面有两个值时,第一个表示左上和右下角度,第二个表示右上和左下角度

为一个值时,为所有角的角度

也可以分别设定左上左下右上右下的属性

例如,左上角的属性如下所示:

边界顶端左半径

边框图像

图像边框(类似于剪切图像) ) ) )。

写法:

border-image : URL (' ./image/123.jpg ' ) 100;

border-image : URL (' ./image/123.jpg ' ) 100100100;

上面两行代码是等效的

第二行代码后面的四个数字分别是上、右、下和左边距

border-image : URL (' ./image/123.jpg ' ) 100/100px repeat repeat;

“/”后面的三个参数分别是边框宽度、上下图像填充方法和左右图像填充方法。 repeat拼贴、拉伸(默认样式)和round也是拼贴。 不同的是,如果最后一个图像没有全部显示,则不显示,而是放大前一个图像

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。