css语法学习

图片设置

更改长宽

代码语言：javascript复制

![width:200px](image.jpg)
![height:300px](image.jpg)
![w:200px h:30cm](image.jpg)

图片滤镜（Image Filter）

基于 CSS 的 filter 属性，Marp 可以对图片进行一些基于模糊、亮度、对比度等的操作，如：

代码语言：javascript复制

![blur:15px](image.png)
![brightness:0.5](image.png)
![contract:150%](image.png)

背景图片

同时通过在 bg 后追加图片的格式属性，如 [bg fit] ，可以具体设置背景图片的缩放方式。其中 cover 表示充满页面， fit 表示拉伸以适应页面， auto 为不做缩放使用原图片比例。

更改布局

背景图片布局

代码语言：javascript复制

![bg](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)

在其中一张图片后加入属性 vertical 将使图片纵向组合。

代码语言：javascript复制

![bg vertical](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)

更新图片与文字位置

有时候想左文右图，或者左图右文的布局，可以设置背景图片的位置

代码语言：javascript复制

![bg right w:15cm](images/prometheuslogo.png)

图片加阴影drop-shadow

代码语言：javascript复制

start 
if (condition A ) then (yes)
	:Text 1;
	endif
stop

auto filter image shadow 布局

0 人点赞